size

Action buttons come in five different sizes: extra-small, small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

hasHoldIcon

An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions.

staticColor

When an action button needs to be placed on top of a color background or a visual, use the static color option. Static color action buttons are available in transparencies, or in solid black or solid white, and don't change shades or values depending upon the color theme. Use static black on light color or image backgrounds, and static white on dark color or image backgrounds, regardless of the color theme.

Static color action buttons can appear in static white, regardless of color theme. The static color option allows for them to be placed on top of a custom background that is not part of a Spectrum color theme.

isEmphasized

By default, action buttons are not emphasized. This is optimal for when an action button is not the core part of an interface, such as in application panels, where all the visual components are monochrome in order to direct focus to the content.

The emphasized action button has a blue background for its selected state in order to provide a visual prominence. This is optimal for when the selection should call attention, such as within a tool bar.

label

Action buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration.

hideLabel

The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the label will appear in a tooltip on hover.

isSelected

An action button can have a selected state to allow for toggling — not only for taking a direct action. This can be used to disclose parts of an interface, such as for showing or hiding panels or to switch between views (for example, grid or list views).

isDisabled

An action button in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later.

selectedTextColor

The text color on the selected state of the over-background variant can be customized to match the background it's on.

icon

Use an icon only when necessary and when it has a strong association with the label text.

isQuiet

By default, action buttons have a visible background. This style works best in a dense array of controls where the background helps to separate action buttons from the surrounding container, or to give visibility to isolated buttons.

Alternatively, quiet action buttons can have no visible background until they're interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read.