Skip to main content

Button

Component
Live

The Button component allows users to perform or trigger an action.

FigmaCode

Usage​

Buttons are interactive components that initiate an action and describe what happens when selected.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Button } from "@iag/chroma-react-ui.components";

When to use​

Use Buttons to trigger an action such as submitting a form, confirming a decision, or initiating an operation. Use them to create a clear path or next step for user journeys.

When to avoid​

Avoid using Buttons for navigation purposes. If the intended action is to direct users to another page or a different section of the same page, use a hyperlink instead. Also avoid for hiding and displaying content or sections where an action is not triggered.

Do

  • Do ensure Buttons trigger an action or a series of actions.
  • Do make Button labels specific to the action it performs (e.g. Add to cart, Download report).
  • Do use sentence case for Button labels unless referring to specific titles (e.g. Download the Annual Report).
  • Ensure the Button stands out and are clearly identifiable as a Button.

Don't

  • Don't use generic or device dependent labels like "Click here" or "Submit". They do not provide sufficient information about what the button does.
  • Don't use all-caps as it can present accessibility barriers.

Button variants​

Button variants are divided into two groups. Brand colours (primary, secondary, accent), and Call-To-Action (CTA) buttons. Each brand will have chosen a preference for their CTA. When designing white-label products, CTAs should be used so that application teams do not need to implement conditional logic to change button variants per brand. Each colour is available as solid, outline, or text styles.

Button grouping​

If two buttons are presented in a group, they should be placed inside a button group component.

Links and buttons have different purposes. Buttons are used to trigger an action while links are used to navigate to a new URL. They also operate differently for keyboard-only users.