Button

Buttons are clickable elements primarily used to perform an action, as they communicate the call-to-action and their style calls for users' attention. Buttons can also be used to allow navigation in some cases, such as for the “Next” or “Back” buttons that help users navigate through a form.

Usage guidelines

When to use

• To prompt the user to perform an action on your interface, such as submitting a form or showing/hiding an interface component.
• Although links and button have two different functions, the “Button link” type covers the use case of a link when placed within components, such as a header, breadcrumbs or card.

Writing guidelines

• Label: As buttons represents actions, use a verb to communicate clearly what the user will accomplish by pressing a button, e.g. “Save”, “Download”. (“Next” and “Back” are exceptions).
• Length: Keep labels short by using one or two words.
• Capitalization and case: Write button labels in sentence case and without punctuation.

Accessibility guidelines

Design considerations

• Don't rely on color as the only way to communicate meaning so make sure the label of your button is clear and descriptive.
• Make sure buttons have enough contrast with the background color you use that is different from primary palette colors (e.g. when picking an inclusive color in promos or stages).
• Be mindful when using icon only buttons as they might not be universally understood. You can include a tooltip displaying the label on hover or focus for a more accessible experience.

Keyboard interactions

Standard keyboard interactions apply:

• Tab: to move focus on a button
• Space / Enter: to activate button in focus

Specifications

Anatomy

1. Background: Contains the label and its style can largely vary according to type, state and theme.
2. Label: short call-to-action text.
3. Icon (left or right): (optional) helps enhancing the meaning of the label.

Types

There are five different types of buttons:

• Primary: used for the most important CTA - when the action is a primary goal of the screen.
• Secondary: can be paired with primary buttons when they serve as a less encouraged alternative to the primary CTA, or can be placed alone when the action is not a primary goal of the screen.
• Tertiary: used to separate the action from the rest of the visual flow of the screen. An example where the added emphasis may be needed is for purchase or renewal actions.
• Link: typically used for less important action or within components as links, to ensure proper space is kept between elements.
• Action: Used for quick, simple calls to actions, where the icon is intuitive for the given context.

Variants

Primary, Secondary, Tertiary and Link buttons come in three variants: "Text only", "Left icon + text", "Text + Right icon"

Variant	Purpose
Text only	Basic text button. No specific icon exists or is needed for the CTA.
Left icon + text	A specific icon exists and is useful to reinforce the meaning of the CTA. Left positioning for an icon is the common use case.
Text + right icon	A specific icon exists and is useful to reinforce the meaning of the CTA. Right positioning can be used when there is a visual benefit to implying rightwards movement (e.g. when the button is taking the user to the next page in a sequence of steps).

Action

Action button comes in two variants: “Shape” and “Icon only”.

Variant	Purpose
Shape	Can be used either as an element within a component or as a standalone element.
Icon only	To be used within components where the shape variant doesn't fit with the layout or white space of the component (e.g. in cards).

Size

Buttons are available in four different sizes: large, medium, small and extra small. Although the medium size should cover most use cases, choose the size that best fits your specific use case.

The width of a button varies according to the length of the label.

Styling

Theme

Buttons are available for both light and dark theme.

Emphasis

Filled buttons (for primary actions) come with a solid background to be more prominent than outlined buttons (for secondary actions), that are styled with a visible stroke but no background color. If you need to place an even lower emphasis on a button, you can use a link button.

Use different emphasis to assign different levels of importance to the several options.

do

Use more than one primary button per screen, section or container.

Color

Use default button colors provided by Zurich Design System.

Use custom colors for button

Tertiary buttons can be used to give a semantic meaning to a button: use Sky Blue for “Alert”, Moss for “Positive” and “Peach” for negative.

Behavior

Positioning

Buttons should be positioned in consistent location throughout your UI. They are commonly placed in:

• Modals
• Forms
• Action cards
• Promos
• Stages

Alignment

Buttons can be center, left or right aligned, depending on the case. In general, center or left alignment is a good option but in cases such as multi-steps forms, aligning buttons to the right of the container can help provide a better user experience.

Center and right alignment

As a general rule, when the button group is **center** or **right** aligned, primary buttons sit on the right of button

Left Alignment

When the group is **left** aligned, the primary button sits on the left.

Grouping

Spacing between buttons in a group can vary according to the viewport, button size or space available in a container. As a general rule, leave at least 8px of spacing between buttons.

Button groups are commonly laid out horizontally but can be stacked vertically if horizontal space is scarce, for example in mobile viewports. Buttons can optionally stretch to fit the width of a small container (or mobile device).

When grouping more than two actions, pair together a maximum of two button types, to avoid creating a confusing experience for the user.

Mix only two types of buttons

Mix more thant two types of buttons

Interaction

For each button type there are five button states — enabled, hover, focused, pressed, disabled and loading.

Related components

• Modal