Button

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

Structure

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.

Don't

Don't use different sized buttons together. When in doubt, stick with the default sized button.

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.

Block buttons are best used in narrower UIs, like takeovers.

Buttons have four available states that change the appearance of the button slightly:

The loading state for buttons displays a progress indicator to provide feedback to the user that their button press is doing something.

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

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`