Skip to main content

Button

Action Buttons allow users to trigger actions by clicking, tapping, or pressing a corresponding key on a keyboard, such as the “Enter” key.

Rules of Thumb

Secondary Button

Secondary Buttons are an alternative Button style to be used in situations where a de-emphasized Button is beneficial in guiding the user to a preferred option. For example, use a Secondary Button for the less preferred option in Ok/Cancel Button pairings.

Appearance and Behavior

Buttons have consistent text and icon styling but can vary by size, state, and hierarchy.

Size

Buttons come in three standard sizes: Small, Medium, and Large. Medium buttons are suggested as the default option to use in a layout. Small buttons can be used when there is not much space available. Large buttons are rarely used, but can highlight a particular action when more space is available like on a full page Sign In form.

State

Standard states for Buttons include: Default (Button is enabled, clickable), Hover (the user has paused over an active or focused Button), and Disabled (the Button is not interactive, and its content is not sent when the form is submitted).

Hierarchy

Astro uses Primary, Secondary, and Borderless buttons to help the user visually distinguish options and preferences. Primary buttons are visually emphasized to guide the user to the action that is most likely to be most desirable to them at a given point. Secondary Buttons are an alternative Button style to be used in situations where a de-emphasized Button is beneficial in guiding the user to a preferred option. For example, use a Secondary Button for the less preferred option in OK/Cancel Button pairings. Borderless Buttons use the same rules as Secondary Buttons but do not have borders.

Examples

Do: Use Buttons for actionable controls only
Do: Use Buttons for actionable controls only
Don’t: Use elements that look like Buttons but are not
Don’t: Use elements that look like Buttons but are not
Do: Right-align Buttons and give them adequate spacing from fields.
Do: Right-align Buttons and give them adequate spacing from fields.
Don’t: Mix Button colors and sizes.
Don’t: Mix Button colors and sizes.
Do: Use standardized Button colors only.
Do: Use standardized Button colors only.