isDisabled

A 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.

isPending

Buttons can indicate that a quick progress action is taking place (e.g., saving settings on a server). In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.

Use the pending state for a button sparingly. It should be reserved only for when the progress is supposed to be quick (taking 5 seconds or less), and when there is no better way to communicate as such.

justified

A button can become justified. By default, it is not justified since the button size depends on the label and/or icon inside of each button. When a button is justified, it takes up the entire available container width.

size

Buttons come in four different sizes: 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.

style

Buttons are available in either fill or outline styles. A button in the fill style has a solid background, since it's meant to be intentionally more prominent than a button in the outline style.

An outline style button has a visible stroke and no background color, and should only be used for secondary actions.

staticColor

When a button needs to be placed on top of a color background or a visual, use the static color option. Static color buttons are available in primary and secondary outline or fill styles, in black or 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 buttons can appear in static white or black, regardless of color theme. The static color option allows for these to be placed on top of a custom background that is not part of a Spectrum color theme while still providing optimal contrast.

variant

The Button component includes four variants: Accent, Primary, Secondary, and Negative. Each variant represents a different level of emphasis, helping designers establish clear visual hierarchy and guide users toward appropriate actions.

• The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.
• The primary button is for medium emphasis. Use it in place of a call to action button when the action requires less prominence, or if there are multiple primary actions of the same importance in the same view.
• The secondary button is for low emphasis. It's paired with other button types to surface less prominent actions, and should never be the only button in a group.
• The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. Use it sparingly.

label, hideLabel, and icon

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. Use an icon only when necessary and when it has a strong association with the label text.

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