Edit in GitHubLog an issue

sp-button

Since: UXP 4.1, PS 22.0.0

Renders a button.

Buttons

See:

Example

Copied to your clipboard
<sp-button>Vectorize</sp-button>

Variants#

There are several variations that are supported.

Call to action#

Renders a "call to action"-style button. This is the default variant if no variant is provided.

Copied to your clipboard
<sp-button variant="cta">Click me</sp-buttom>

Primary#

Renders a "primary" button.

Copied to your clipboard
<sp-button variant="primary">Click me</sp-buttom>

Secondary#

Renders a "secondary" button.

Copied to your clipboard
<sp-button variant="secondary">Click me</sp-buttom>

Warning#

Renders a button intended to be used to indicate negative consequences to the action, such as an action that can't be undone.

Copied to your clipboard
<sp-button variant="warning">Click me</sp-buttom>

Over Background#

Renders a button that's suitable over a background (such as an image).

Copied to your clipboard
<sp-button variant="overBackground">Over an Image</sp-buttom>

Disabled#

Copied to your clipboard
<sp-button disabled>Disabled</sp-button>

Quiet#

Quiet buttons do not have a border, and are less visually distracting.

Copied to your clipboard
<sp-button quiet>A quiet button</sp-button>

With icon#

Built-in SVG icon#

Copied to your clipboard
1<sp-button>
2 <sp-icon name="ui:Magnifier" size="s" slot="icon"></sp-icon>
3 Zoom
4</sp-button>

Custom SVG icon#

Copied to your clipboard
1<sp-button>
2 <div slot="icon" style="fill: currentColor">
3 <svg viewBox="0 0 36 36" style="width: 18px; height: 18px;">
4 <path d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"/>
5 </svg>
6 </div>
7 Edit Text
8</sp-button>

Responding to events#

You can respond to a click on the button using the click event.

Copied to your clipboard
1document.querySelector(".yourButton").addEventListener("click", evt => {
2 console.log("Button clicked");
3})
Copyright © 2021 Adobe. All rights reserved.