Button

Installation

npm install @nib-components/button

Usage

import {PrimaryButton, SecondaryButton, TertiaryButton} from '@nib-components/button';

Buttons vs Links

Buttons are designed for ‘critical’ user tasks, whereas links are intended to direct the user to supporting, informative or additional information. They should not be considered to be interchangeable.

Buttons initiate actions - submitting a form, starting or continuing a process, or commencing an on-page action.

Links are for navigation - directing the user to another page, section or destination. They can exist ‘inline’ with other text, or be used standalone for ‘tangential’ tasks. They should not be used to carry out on-page actions.

Note that Buttons may sometimes be used to navigate to additional information or destinations, but only in contexts where accessing that information is a ‘step’ towards an holistic task or action. To ensure the browser recognises this implementation, refer to Buttons as links for correct HTML markup.

Interactive demo

<>
  <Inline space={2}>
    <PrimaryButton>Primary</PrimaryButton>
    <SecondaryButton>Secondary</SecondaryButton>
    <TertiaryButton>Tertiary</TertiaryButton>
    <DestructiveButton>Destructive</DestructiveButton>
  </Inline>
</>

Props

Variations

Primary buttons

Use the primary button for the main call to action on a page. Primary buttons should only appear once per page.

Secondary buttons

Use secondary buttons for secondary actions on a page. Avoid too many secondary buttons on a page as it can make it hard for the user to know what to do next. Instead simplify the page if possible.

Tertiary buttons

Tertiary buttons are provided to enable a versatile and meaningful hierarchy of user actions within a particular flow or context.

A tertiary button should generally only appear grouped with one or more adjacent primary or secondary buttons, and denote actions that are a diversion from the intended or desired 'primary' interaction of its context.

Example uses for Tertiary buttons might include 'Cancel', 'Edit' or 'Learn More'. Where tertiary actions might erase, undo or halt user-led input or progress.

Destructive buttons

Use destructive buttons for cancel/delete actions on a page.

Icon buttons

In some applications, a button’s function may be self-explanatory or app-specific. In these cases, the IconButton provides an icon-only button variation, with styling and size constraints set to make sure it is easily perceived and accessible to the user. The IconButton is scoped to our suite of SystemIcons, which are intended to be able to imply their function in isolation.

The intended use case for these buttons is as small, unassuming controls for non-essential, on-page tasks, eg. sorting, filtering or selectively displaying content. To this end, they support an additional ‘selected’ state, used to indicate that the control is active. In these situations, the IconButton should be regarded as a Toggle - with an immediate and visible action being undertaken when clicked.

As such, this button variation should be used sparingly, and with careful consideration of both usability and accessibility. Note also that IconButtons do not imply hierarchy in the same way as Primary, Secondary and Tertiary buttons, and should not be grouped with these controls.

<>
  <Inline space={2}>
    <IconButton icon={FilterSystemIcon} label="Filter" />
    <IconButton icon={AscendingSystemIcon} label="Ascending" />
    <IconButton icon={DescendingSystemIcon} label="Descending" selected />
    <IconButton icon={SettingsSystemIcon} label="Configure" showLabel={{xs: false, lg: true}} />
  </Inline>
</>

Labels and responsive considerations

For accessibility and usability reasons, the label prop is required, though a label may not always be visually rendered. When showLabel is false (via breakpoint or configuration), the label is displayed via a Tooltip when the user hovers over the IconButton for a set duration. The showLabel prop can also be set responsively to make use of additional screen real estate where available.

Note that the label prop value is also applied to the IconButtons’s aria-label for screen-reader use, so this reinforces the importance of effective copy choices. From an accessibility perspective, mouse-based hover behaviours are not suitable for critical tasks or content, so these props should be considered ‘enhancements’, and therefore not be relied on to inform a user of an IconButton’s implied action.

Unstyled button

UnstyledButton provides a generic HTML button element, with our standard focus ring. This is useful for wrapping icons and other inert elements to add interactive behaviours. UnstyledButton has only padding props available for configuration as mentioned below:

Buttons as links

By default our button components use the <button> element, but this is not the only option. Buttons can also be used to link users to other pages or different sites altogether, whilst retaining the desired button styling. It is important to use the right semantic element for your use case.

• If clicking on the element will perform an action on the page, use <button>.
• If clicking on the element will navigate the user to a new page then use <a>.

<PrimaryButton href="/health-insurance" component="a">
  Go to my account
</PrimaryButton>

<SecondaryButton onClick={handleSubmit}>
  Submit
</SecondaryButton>

Labels

Button labels express the action that will occur when the button is pressed. Labels should use sentence-style capitalisation and be short and concise - ideally no more than 3 words.

Use action words such as “Delete” and “Save” and avoid generic words such as “Yes” and “No”.

Placement

Order

When using multiple buttons, the primary button appears to the right and secondary button appears to the left. Complying with the order ensures consistency across our products.

Alignment in forms

Align buttons to the left in forms so that they align with form controls. On mobile, buttons are full-width to provide a greater touch region for user.

Button alignment on large screens:

Full-width buttons on mobile screens and tight spaces:

Icon usage

Use icons in buttons to clarify an action or draw more attention to a button. It's important to use icons in buttons sparingly and only when they help the user. Colour the icon the same as the label text.

Refer to the iconography guidelines for more details on icon usage.

Directional icon

Directional icons should only be used on the right of the button label.

Directional icons on the right of the label:

Decorative icon

In all other instances, icons should be placed to the left of the button label.

Non-directional and decorative icons on the left of the label:

Related components

• Icons
• Loader