Visually, a Button is a rounded rectangle with a descriptive caption at its center. Users interact with Buttons via both pointer devices and keystrokes.
In Odyssey there are five Button variants: Primary, Secondary, Danger, Clear, and Overlay.
Use our default button for primary actions in a view. For example, “Save”.
It's ideal to have one Primary Button per view. However, it's okay to have more than one Primary Button as long that they are equal in priority.
This is ideal for a secondary actions to compliment the Primary Button. Like the Primary Button, use this button sparingly to provide focus to the user.
Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed.
Use Clear Buttons for interactions that change visible UI but don't submit data. For example, showing a password field or dismissing a modal.
They pair well with Primary and Secondary buttons.
Use Overlay Buttons when Primary or Secondary variants aren't visually suitable. These Buttons may only be used on top of a base-variant background color, a photo, or an illustration.
Odyssey provides visual affordances these states: Enabled, Focus, Hover, and Disabled.
Buttons in their "normal" state are considered enabled. They are ready for user interaction.
The focus state is a visual affordance that the user has highlighted the Button with a pointer, keyboard, or voice.
Hover states are activated when the user pauses their pointer over the Button.
Disabled Buttons are unavailable for interaction and cannot be focused. They can be used when an action is unavailable, possibly due to incomplete information or access restrictions.
You should pair Disabled Buttons with a Tooltip if the user would benefit from additional context.
Use buttons to indicate the in-page actions a user can take.
Don't use buttons to navigate users around the site or product; use links instead.
# Content Guidelines
# Punctuation and copy
Be as direct as possible with the goal you are trying to get the user to do. Avoid patterns that need the user to discover what a button does.
Be strategic in your button placement so a user has the best context. For example, consider using Buttons at the end of a form or preceding them with supporting copy.
# Word count
Don't use more than three words inside of a button. If a user needs more context, consider other design solutions.
When using multiple words, use sentence case. Capitalize only the first letter and any proper nouns.
# Buttons with Icons
Icons can be added to any of our button variants to increase clarity or add flair. Icons will be laid out automatically based on language direction.
# Icon-only usability
We recommend pairing icon-only buttons with our Tooltip. While this is not required, it will increase clarity for sighted users.
Color is not a clear affordance for all users, please use clear, concise copy to label buttons. Good rules of thumb: use three or less words to describe your action and start your label with a verb (e.g. "Access report" vs "Report PDF").