Button
Buttons have the most options of any other components to allow for different colors, shapes, and sizes.

Structure
Elements

- Container
- Text label
Variations
Emphasis

- Default
- Primary
- Link
Size

Size | Description |
---|---|
Normal | The normal button size should be the standard button size used for most card and dialog interactions. |
Small | Use a small button within page content when the button doesn’t need to stand out from the text as much or when it looks too large. |
Wide | Wide buttons are useful when you want the primary button to take up a bit more space in case it contains a short word or phrase. |
Large | Use large buttons in takeovers where there is one primary action and an option to dismiss the takeover. |
Block
Block buttons are designed to take up an entire line. When two block buttons are created together, be sure to include space to separate the two.

Type

- Text
- Icon
Behavior
States
Buttons have four available states that change the appearance of the button slightly:
- Enabled
- Focused
- Active
- Disabled
- Loading
The loading state for buttons displays a progress indicator to provide feedback to the user that their button press is doing something.



Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
Theming
The following table lists the theme properties used to style this component and any variations as well as a sample value.
A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.
Examples of each theme property may be referenced by clicking a property name in the “property” column.
Sample | Property | Sample value |
---|---|---|
buttonCornerRadius
|
8px
|
|
defaultButtonBorderColor
|
#EEF1F5FF
|
|
defaultButtonBorderDisabledColor
|
#EEF1F54D
|
|
defaultButtonBorderFocusedColor
|
#EEF1F580
|
|
defaultButtonBorderPressedColor
|
#EEF1F533
|
|
defaultButtonColor
Simple hyperlink-like buttons with text that that is intended to display on primary or secondary content backgrounds |
#EEF1F5FF
|
|
defaultButtonDisabledColor
|
#EEF1F54D
|
|
defaultButtonFocusedColor
|
#EEF1F51A
|
|
defaultButtonPressedColor
|
#EEF1F533
|
|
defaultButtonTextDisabledColor
|
#2A73A880
|
|
defaultButtonTextFocusedColor
|
#2A73A8FF
|
|
linkButtonFocusedColor
Background focused states |
#2A73A81A
|
|
linkButtonPressedColor
Background pressed states |
#2A73A833
|
|
linkButtonTextColor
Simple hyperlink like buttons with text that that is intended to display on primary or secondary content backgrounds |
#2A73A8FF
|
|
linkButtonTextDisabledColor
|
#2A73A84D
|
|
linkButtonTextDisabledColor
|
#2A73A84D
|
|
linkButtonTextFocusedColor
|
#2A73A8FF
|
|
linkButtonTextPressedColor
|
#2A73A8FF
|
|
primaryButtonColor
The primary theme pairing; was more commonly used, but now has a limited use for first tally chips and login icons |
#2A73A8FF
|
|
primaryButtonDisabledColor
|
#2A73A84D
|
|
primaryButtonFocusedColor
|
#388ECDFF
|
|
primaryButtonPressedColor
|
#61A5D7FF
|
|
primaryButtonTextColor
Text guaranteed to contrast on theme background |
#FFFFFFFF
|
|
primaryButtonTextDisabledColor
|
#FFFFFF80
|
|
primaryButtonTextFocusedColor
|
#FFFFFFFF
|
|
primaryButtonTextPressedColor
|
#FFFFFFFF
|