Skip to content
Autumn 2026 Mesh Release and Design Tokens v2 now available! Read the announcement
    DesignDevelopAnalyticsFeedback
    Stable

    Utility Button

    UtilityButton acts as inline page navigation and should always be used in groups of two or more, compared to the Button component which is designed to work as a standalone element and performs the role of a call-to-action (CTA).

    GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

    Installation

    bash
    npm install @nib-group/mesh-utility-button

    Note: You will also need to install the peerDependencies @nib-group/mesh-icons and @nib-group/mesh-theme.

    Usage

    jsx
    import UtilityButton from '@nib-group/mesh-utility-button';

    Interactive demo

    UtilityButton is a compound component with two sub-components: UtilityButton.Title and UtilityButton.SubTitle.

    jsx
    <Box padding={5}>
  <UtilityButton href="#" icon={ConversationGraphicIcon}>
    <UtilityButtonTitle>Compare plans</UtilityButtonTitle>
    <UtilityButtonSubTitle>Find the right plan</UtilityButtonSubTitle>
  </UtilityButton>
</Box>

    Note: If you are using this component within a React Server Component (like the NextJS 13+ App Router), it is suggested to import UtilityButtonTitle and UtilityButtonSubTitle individually, and to provide an initialised icon component to the icon and actionIcon props, rather than passing the icon component directly.

    jsx
    import UtilityButton, {UtilityButtonTitle, UtilityButtonSubTitle} from '@nib-group/mesh-utility-button';
    import {DentalGraphicIcon, DownloadSystemIcon} from '@nib-group/mesh-icons';
    

    () => (
      <UtilityButton icon={<DentalGraphicIcon />} actionIcon={<DownloadSystemIcon />}>
        <UtilityButtonTitle>Required title</UtilityButtonTitle>
        <UtilityButtonSubTitle>Optional subtitle</UtilityButtonSubTitle>
      </UtilityButton>
    );

    Props

    UtilityButton

    PropTypeDefaultDescription
    iconcomponentAn icon to be displayed on the left of the button, to communicate the context or intent of the button. Must be a graphic icon from the @nib-group/mesh-icons package.
    showBorderbooleantrueOption to display a border.
    selectedbooleanfalseOption to change UtilityButton state to selected state. Adds border and Updated Title color when its true
    disabledbooleanfalseOption to indicate the disabled state of the UtilityButton
    showActionIconbooleantrueOption to display the ChevronRightSystemIcon (or SystemIcon set by the actionIcon prop).
    actionIconcomponentChevronRightSystemIconAn icon to be displayed on the right of the button, to communicate the function of the UtilityButton. Must be a system icon from the @nib-group/mesh-icons package.
    hrefstringAdd a link to the button. Note that the component is rendered as an <a> tag in the DOM.
    onClickfunctionIf the component is required to carry out any complex functionality other than linking (via href).
    componentstring or nodeWhat to render the UtilityButton as. Should be either a button or a. If onClick is not supplied, will default to a
    children (required)nodeShould include a UtilityButton.Title (and optionally a UtilityButton.SubTitle)

    UtilityButton.Title

    PropTypeDefaultDescription
    truncatebooleanfalseOption to truncate the title. Given this component is a CTA, truncating the label is not recommended.
    children (required)stringThe text for the UtilityButton.Title

    UtilityButton.SubTitle

    PropTypeDefaultDescription
    truncatebooleanfalseOption to truncate the subtitle.
    children (required)stringThe text for the UtilityButton.SubTitle

    Considerations

    UtilityButton should not be used in isolation

    If you require a single button, then we recommend the Button component.

    All UtilityButtons in a group should be uniform. Props used on one UtilityButton should be repeated (or carried through) to all other adjacent UtilityButtons. For example, if an icon is included in one UtilityButton, then all adjacent UtilityButtons should include an icon.

    Be conscious of the number of UtilityButton components you have in a group, and the impact that might have on available space for the title/subtitle. Within our default Container width we've found that 4 - 5 is the most that will fit comfortably. If using icons, this drops down to 3 - 4. Ensure you have properly set collapseBelow props on any parent Layout component (e.g. Columns, Tiles or Inline). The examples below use Columns for this purpose.

    If the UtilityButton does not have a ModeProvider wrapping it directly, the showBorder prop should always be true. This ensures the UtilityButton is visually distinct from its parent element's background.

    Multiple UtilityButtons

    jsx
    <Box padding={4} background="default" sentiment="default" prominence="gentle">
  <Columns space={4} collapseBelow="md">
    <Column flex width="1/3">
      <UtilityButton href="#">
        <UtilityButton.SubTitle>Find the right plan</UtilityButton.SubTitle>
        <UtilityButton.Title>Compare plans</UtilityButton.Title>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#">
        <UtilityButton.SubTitle>Need help?</UtilityButton.SubTitle>
        <UtilityButton.Title>Talk to nib</UtilityButton.Title>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#">
        <UtilityButton.SubTitle>Had treatment?</UtilityButton.SubTitle>
        <UtilityButton.Title>Make a claim</UtilityButton.Title>
      </UtilityButton>
    </Column>
  </Columns>
</Box>

    UtilityButtons with selected state

    jsx
    <Box padding={4}>
  <Columns space={4} collapseBelow="md">
    <Column flex width="1/3">
      <UtilityButton href="#" selected={true}>
        <UtilityButtonSubTitle>Find the right plan</UtilityButtonSubTitle>
        <UtilityButtonTitle>Compare plans</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#">
        <UtilityButtonSubTitle>Need help?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Talk to nib</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#">
        <UtilityButtonSubTitle>Had treatment?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Make a claim</UtilityButtonTitle>
      </UtilityButton>
    </Column>
  </Columns>
</Box>

    Multiple UtilityButtons with icons

    jsx
    <Box padding={4}>
  <Columns space={4} collapseBelow="md">
    <Column flex width="1/3">
      <UtilityButton href="#" icon={HealthManagementGraphicIcon}>
        <UtilityButtonSubTitle>Find the right plan</UtilityButtonSubTitle>
        <UtilityButtonTitle>Compare plans</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#" icon={ConversationGraphicIcon}>
        <UtilityButtonSubTitle>Need help?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Talk to nib</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#" icon={HospitalGraphicIcon}>
        <UtilityButtonSubTitle>Had treatment?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Make a claim</UtilityButtonTitle>
      </UtilityButton>
    </Column>
  </Columns>
</Box>

    Note: The Columns and Column with the flex prop is how we achieve equal heights for the UtilityButtons when the content lengths differ.

    Multiple UtilityButtons with icons and actionIcons

    jsx
    <Box padding={4}>
  <Columns space={4} collapseBelow="md">
    <Column flex width="1/3">
      <UtilityButton href="#" icon={HealthManagementGraphicIcon} actionIcon={DownloadSystemIcon}>
        <UtilityButtonSubTitle>Find the right plan</UtilityButtonSubTitle>
        <UtilityButtonTitle>Compare plans</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#" icon={ConversationGraphicIcon} actionIcon={DownloadSystemIcon}>
        <UtilityButtonSubTitle>Need help?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Talk to nib</UtilityButtonTitle>
      </UtilityButton>
    </Column>
    <Column flex width="1/3">
      <UtilityButton href="#" icon={HospitalGraphicIcon} actionIcon={DownloadSystemIcon}>
        <UtilityButtonSubTitle>Had treatment?</UtilityButtonSubTitle>
        <UtilityButtonTitle>Make a claim</UtilityButtonTitle>
      </UtilityButton>
    </Column>
  </Columns>
</Box>
    Edit this page