Skip to main content
Odyssey Design System
Odyssey Design System

Button

A clickable button used for form submissions and most in-page interactions.

# Anatomy

# Behavior

Visually, a Button is a rounded rectangle with a descriptive caption at its center. Users interact with Buttons via both pointer devices and keystrokes.

# Variants

In Odyssey there are five Button variants: Primary, Secondary, Danger, Clear, and Overlay.

# Primary

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.

# Secondary

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.

# Danger

Use Danger Buttons for scenarios where a user may be deleting information or making a decision that can not be reversed.

# Clear

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.

# Overlay

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.

# Full-width

Full-width buttons are intended for single-interaction UIs. These are often widgets like "Sign In" or "Sign Up".

Use this variant when you desire the Button to be full-width regardless of screen size.

# States

Odyssey provides visual affordances these states: Enabled, Focus, Hover, and Disabled.

# Enabled

Buttons in their "normal" state are considered enabled. They are ready for user interaction.

# Focus

The focus state is a visual affordance that the user has highlighted the Button with a pointer, keyboard, or voice.

# Hover

Hover states are activated when the user pauses their pointer over the Button.

# Disabled

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.

# Usage

Use buttons to indicate the in-page actions a user can take.

Do

Don't use buttons to navigate users around the site or product; use links instead.

Don't

# Content Guidelines

# Punctuation and copy

# Context

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.

Do

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.

Don't

# Word count

Don't use more than three words inside of a button. If a user needs more context, consider other design solutions.

Do
Don't

# Capitalization

When using multiple words, use sentence case. Capitalize only the first letter and any proper nouns.

Do
Don't

# 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.

# Accessibility

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").

# References

# Further reading