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.
<certara-button> can also render as a hyperlink by giving it an href and make use of all the pre-built advantages like copying URLs, opening in new tabs, etc. Or, just maintain the appearance of a hyperlink. As always, use the right semantics for the situation when choosing between buttons and links.
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.
Icons passed in with the left-icon | right-icon
attributes default to regular weight. For custom weights, use
<certara-icon variant="…"> inside the button
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 primaryNeutral as secondaryButton link as tertiary
Brand as primary
Brand as secondary
Button link as tertiary
Danger as primaryNeutral as secondaryButton link as tertiary
Brand as primary
Danger as secondary
Button link as tertiary
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.
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 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.
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.
Icon buttons (like Buttons) let users take action. Used for repeated or persistent actions on a page or toolbar, they lack visible labels to simplify the UI.
