BUTTON
A button lets the user perform an action with a tap or a click.
WHEN TO USE
Use a button
when the user needs to perform an action, like initiating a new flow or confirming something.
Don't use a button
When linking to other pages or external resources (use a link instead)
For hierarchical navigation that takes users deeper into the product (use a navigation element instead)
TYPES
There are two types of buttons, default and negative, each designed to convey the intent and importance of an action.
Default
The default button represents a standard action and should be used for general interactions.
Negative
Use the negative button for confirming destructive actions, such as canceling a transfer or closing a balance.
PRIORITIES
Priorities establish a visual hierarchy among buttons on the screen, ensuring that the most important actions stand out and take precedence over others.
Primary
The most important action to move forward in a flow, acknowledge and dismiss, or finish a task.
Secondary
Use secondary for providing alternatives to the primary action, or when none of your actions are more important than the others.
Secondary gray
For functional actions, such as copying details (e.g., policy number or appointment ID), triggering quick controls, or enabling in-app navigation.
Tertiary
Dismissive actions give users a way out of something, letting them cancel, do nothing, dismiss, or skip.
Primary
The primary action helps users move forward in a flow, acknowledge or dismiss information, or complete a task.
Each page should have only one primary button where applicable, which can change contextually if another action must be completed before proceeding.
Use one primary button per page to indicate the most important action.
Don’t use multiple primary buttons on a page.
Secondary
Use secondary buttons to offer alternative actions or when no action takes priority over the others.
Use secondary buttons when you need to display multiple key actions at the same level of hierarchy.
Don’t pair a secondary with a negative action, use secondary gray or tertiary instead.
Secondary gray
Use secondary neutral buttons for less important actions, such as copying beneficiary or prescription details, or navigating between screens.
Avoid using secondary neutral buttons for dismissive actions, use tertiary instead.
SIZES
There are six different button sizes, each designed for specific purposes and use cases.
X Small
Small
Medium
Large
X Large
2X Large
INTERACTION
Unless the button is disabled, the user can tap or click on it to perform the action assigned to it.
PLACEMENT
Buttons should always be contextual and aligned with the content, creating a clear connection between the action and its purpose.
On mobile, for actions that require user attention, like finalizing a step or proceeding in a process, it’s important to keep the button visible at all times.
This can be achieved by pinning the button to the bottom of the screen, outside the scrollable area. Only one primary action should be pinned per screen to maintain clarity and focus.
CONTENT
Button
Button copy should:
—
Start with a verb, such as ‘Continue’ or ‘Cancel’
—
Be concise, ideally 1 or 2 words
—
Clearly describe the action, so users know what will happen next
—
Align with the surrounding content, using consistent wording where possible
—
Avoid first-person pronouns like ‘me’, ‘my’, or ‘I’
—
Use sentence case, capitalizing only the first letter of the first word
—
Have no full stop
AVAILABILITY