Accent

The accent button communicates strong emphasis and is reserved for encouraging critical actions. In general, only use the emphasized option for the most important action on the page.

Disabled

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.

Negative

The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. Use it sparingly.

Pending

The pending button is for indicating that a quick progress action is taking place. In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress. We recommend the use of the .is-pending class on the component’s parent container, but there is also an option to use an attribute of pending instead. Buttons should have the disabled attribute when the pending state is applied.

Primary

The primary button is for medium emphasis. Use it in place of an accent button when the action requires less prominence, or if there are multiple primary actions of the same importance in the same view. Both the fill (default) and outline styles are demonstrated in this example.

Secondary

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. Both the fill (default) and outline styles are demonstrated in this example.

Sizing

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.

Static black - primary

When a button needs to be placed on top of a light color background or a visual, use the static black options. Static color buttons do not change shades or values depending upon the color theme.

Static black - secondary

Static white - primary

When a button needs to be placed on top of a dark color background or a visual, use the static white options. Static color buttons do not change shades or values depending upon the color theme.

Static white - secondary

Text overflow

When the button text is too long for the horizontal space available, it wraps to form another line. When there is no icon present, the text is aligned center. When there is an icon present, the text is aligned start (left with a writing direction of left-to-right) and the icon remains vertically aligned at the top.

Text overflow - disabled text wrap

The normal behavior for lengthy text in the given horizontal space available is that it will wrap to form another line. By using the .spectrum-Button--noWrap class, the lengthy button text will not cause a line break and the width of the button will expand until it reaches its maximum width. Please note: this can cause undesired overflow experiences and to help prevent this, the overflowing text will attempt to hide by showing an ellipsis (...). This is demonstrated in the last two examples below, by constraining the maximum width of the button. This option is not part of the design spec, so please use carefully, with consideration of the overflow behavior and the readability of the button's content.