Skip to content
Design System

Buttons

Buttons are used to trigger an action or an event. Button labels let the user know what to expect by clearly communicating what selecting the button will do or where it will take them.

Design

Section titled “ Design”

Variants

Section titled “Variants”
Brand Secondary Danger Success
Inverse

Additional sizing

Section titled “Additional sizing”

(Note: Works on solid, outline, and link buttons)

Small button

Icons

Section titled “Icons”

(Note: Works on solid, outline, and link buttons)

Icon on left
Section titled “Links”

If you have a <button> that for whatever reason needs to look like a link, eschew the use of <certara-button> in favor of a simple <button> with a class="link". Use Text color utilities to effect color variances.

Best Practices

Section titled “ Best Practices”

Choosing an icon

Section titled “Choosing an icon”

For more information, refer to the Icon page.

Hierarchy

Section titled “Hierarchy”

When multiple actions/options are needed it is important to distinguish their level of importance. Buttons have three levels of importance (primary, secondary, and tertiary).

The example below shows how to display buttons in order of importance (left to right), and the possible combinations when all three are in use.

Brand as primary Neutral as secondary Button link as tertiary
Brand as primary Brand as secondary Button link as tertiary
Danger as primary Neutral as secondary Button link as tertiary
Brand as primary Danger as secondary Button link as tertiary

Content guidelines

Section titled “ Content guidelines”
Section titled “Buttons and links”
  • Be clear and predictable for users to anticipate what will happen when they click a button
  • Lead with strong action verbs that encourage action and provide enough context. Use the {verb}+{noun} format except in common action like Save, Close, Cancel, or OK.
  • Be scannable: avoid unnecessary words and articles such as the, an, or a.

Accessibility

Section titled “ Accessibility”
Section titled “Buttons vs. links”

Generally: links go somewhere while buttons do something.

Section titled “Links”

A link is focusable and can be triggered by the enter key. A link will redirect you to a new page or a section within the same page. In VoiceOver’s rotator, it will also be collected within the “Links” window. A link changes what the URL in the browser points to and then displays that website or file. (If the browser can’t display the file, it gets downloaded)

Buttons

Section titled “Buttons”

Buttons perform an action and are used for functionality that does not lead a user somewhere else. A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something, sending a form, expanding navigation, or show/hide. In most cases JavaScript is used to do this. In VoiceOver’s rotator, it will be collected within the “Form controls” window. Outside of submitting a form, a button is paired with Javascript, and without it, the usefulness of buttons is generally limited.

Accessibility concerns

Section titled “Accessibility concerns”

Buttons and links have two different roles, so assistive technologies announce them differently. Links are announced as “links”, while buttons are announced as “buttons”. Having these different roles means there are different user expectations. Not only that links go somewhere and buttons do something, but also their interactivity:

  • Links can be activated by pressing the return key only.
  • Buttons can be activated by pressing return or space.
  • Screen readers have a function to present a list of links to their users. Buttons cannot be as easily reached.
  • Buttons use the normal mouse pointer arrow, while links trigger the use of the pointing hand mouse pointer.

Design resources

Section titled “ Design resources”
View component in Figma