Skip to main content

Button

A trigger for common actions. They use short labels and optional icons to convey the action to be triggered.

Installation​

Install

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

Import

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

Accessibility​

When an html <button> is set as disabled sighted users are given visual feedback to inform the user that they are not able to click on the button, usually via dimmed grey styling and cursor: not-allowed, however, screen readers ignore disabled buttons and do not give the user any indication that it exists on the page. This can be problematic particularly if there is also nothing in the page to indicate that an action has to be performed before the button will be enabled. The user is stuck with no way of navigating.

In order to fix this issue we have created a Chroma Button that instead uses the aria-disabled attribute along with specific css and javascript event handlers to create an accessible disabled Button that is not invisible to screen readers, furthermore we have included an example of how to announce the update of the disabled state in the Disabled Buttons example below.

Accessibility Documentation(opens in new window)

Default Buttons​

The default styling when no variant is added

CTA Buttons​

CTA buttons align with a brand's CTA hierarchy, which involves prioritising CTAs into three levels. Each level is assigned a specific style to ensure consistency in CTAs when switching between brands. For instance, a brand's priority 1 call to action is typically associated with its primary colour, however some brands use secondary or accent colours. By utilising these pre-styled buttons, brands call to action buttons will automatically maintain their desired styling without the need for manual button overrides or interface changes.

Primary Buttons​

Primary, Secondary and Accent buttons are designed to match the brand's colour scheme and are useful in situations where the colour is the necessary aspect for the interface. They are especially effective when placed on variable colour backgrounds, by using the colours inverse button it will maintain accessibility when switching brands.

Secondary Buttons​

Accent Buttons​

Interactive Buttons​

Interactive buttons inherit the interactive colour to ensure consistent styling with your form elements. This is especially useful when using Input Group components, as it allows for a cohesive look even if the brand's primary colour is not their interactive colour.

Destructive Buttons​

Destructive buttons should be used for actions that have potentially destructive or irreversible consequences.

Disabled Buttons​

In the following example an additional step has been added to announce to screen readers when the Button is programatically toggled between disabled and enabled. An action on a page may enable the submit button but for blind users there is no way of knowing that this button is now available to use, this technique ensures that the change is announced to the user.

Full width​

You can use button groups and the Tailwind CSS w-full utility class to make a button occupy the entire width of its container. It's helpful for responsive design, ensuring that the button is fully visible and accessible on any screen size.

Button Sizes​

Loading State​

Properties​

Name
Description
  • children*
    ReactNodeThe content of the button
  • className
    stringAdditional CSS classes to be applied
  • doNotTrack
    booleanFlag to indicate if tracking should be disabled
  • id
    stringHTML id attribute for the component
  • name
    stringHTML name attribute
  • onClick
    (e: MouseEvent<HTMLButtonElement, MouseEvent>) => voidEvent handler for the click event
  • variant
    object | "outline" | "text" | "inverse" | "outlineInverse" | "textInverse" | "primary" | "primaryOutline" | "primaryText" | "primaryInverse" | "primaryOutlineInverse" | "primaryTextInverse" | ... 28 more ... | "interactiveTextInverse"Variant of the button (e.g., "primary", "outline", etc.)
  • size
    SizePropSize of the button
  • disabled
    booleanFlag to disable the button

CSS Variables​