Edit in GitHubLog an issue

sp-action-button

Since: UXP 4.1, PS 22.0.0

Renders an action button.

Action Buttons

See:

Example

Copied to your clipboard
<sp-action-button>An Action</sp-action-button>

Variants#

There are several variations that are supported.

Disabled#

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

Quiet#

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

With icon#

Built-in SVG icon#

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

Custom SVG icon#

Copied to your clipboard
1<sp-action-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-action-button>

Icon only#

Built-in SVG icon#

Copied to your clipboard
1<sp-action-button style="padding: 0; max-width: 32px; max-height: 32px;">
2 <sp-icon name="ui:Magnifier" size="s" slot="icon"></sp-icon>
3</sp-action-button>

Custom SVG icon#

Copied to your clipboard
1<sp-action-button style="padding: 0; max-width: 32px; max-height: 32px;">
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</sp-action-button>

Responding to events#

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

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