Design System
v4.11.0
⌘K

Icon Button

Mobile Support: Full
Jump to Props

Allow users to take actions, and make choices, with a single tap

On this page

Import

import { IconButton } from "@vitality-ds/components";

Usage

Icon buttons are commonly found in app bars and toolbars, or in contexts where the action should not be visually prominent.

IconButtons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a flag to an item.

<IconButton tooltipContent="Add a New Note" icon={<ClinicalItemNote />} />
<IconButton tooltipContent="Add a ToDo" icon={<ToDo />} />
<IconButton tooltipContent="Move to Pending" icon={<Pending />} />
<IconButton tooltipContent="Document printing not available" disabled icon={<Print />} />
<IconButton tooltipContent="Visit Site" href="https://www.google.com" icon={<OpenNewWindow />} />

Always Use Tooltips

Even though the icons may seem self-explanatory, they should always be accompanied by a tooltip describing the action that will be performed by interacting with the IconButton.

Tooltip content should follow the Tooltip content guidelines.

<IconButton tooltipContent="Delete Permanently" icon={<Delete />} />
<IconButton tooltipContent="More Options" icon={<MenuMoreVertical />} />

Accessibility

To enable screen readers to give meaning to the button, the value passed to the tooltipContent property will also set the aria-label prop.

Icon

The IconButton component is optimized to display icons from Vitality's icon library. In cases where you need to use a custom icon, follow the guidelines on custom icons

<IconButton
  tooltipContent="View Blood Sample"
  icon={
    <IconPrimitive color="warning">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M11.3198 2.73501C9.5612 4.70442 5 10.2799 5 15.1313C5 18.9248 8.134 22 12 22C15.866 22 19 18.9248 19 15.1313C19 10.2799 14.4388 4.70442 12.6802 2.73501C12.2602 2.26466 12 2 12 2C12 2 11.7398 2.26466 11.3198 2.73501ZM11.5142 5.55126C10.258 7.02831 7 11.2099 7 14.8485C7 17.6936 9.23857 20 12 20C14.7614 20 17 17.6936 17 14.8485C17 11.2099 13.742 7.02831 12.4858 5.55126C12.1858 5.1985 12 5 12 5C12 5 11.8142 5.1985 11.5142 5.55126Z"
      />
    </IconPrimitive>
  }
/>

Size

When used alongside other compact elements like Buttons, the IconButton can have its size set to compact to match the height.

<Stack spacing="lg">
  <Typography variant="sectionSubtitle">Normal (default) Size</Typography>
  <Stack direction="horizontal" align="center" spacing="xs">
    <IconButton tooltipContent="Add new Medication" icon={<Add />} />
    <IconButton tooltipContent="Delete this Medication" icon={<Delete />} />
    <Button>Edit</Button>
  </Stack>
  <Typography variant="sectionSubtitle">Compact Size</Typography>
  <Stack direction="horizontal" align="center" spacing="sm">
    <IconButton
      tooltipContent="Add new Medication"
      icon={<Add />}
      size="compact"
    />
    <IconButton
      tooltipContent="Delete this Medication"
      icon={<Delete />}
      size="compact"
    />
    <Button size="compact">Edit</Button>
  </Stack>
</Stack>

Usage with Badges

To add additional context to an action triggered by the IconButton, a Badge component may be used. To add the badge, pass it in wrapping the Icon passed to the icon prop.

<IconButton
  tooltipContent="You have 2 new Notifications"
  icon={
    <Badge content={2}>
      <Notifications />
    </Badge>
  }
/>

Toggle Selected

The IconButton can serve as a toggle button.

() => {
  const [isSelected, setIsSelected] = React.useState(false);

  return (
    <IconButton
      tooltipContent={isSelected ? "Mark as Not Reviewed" : "Mark as Reviewed"}
      icon={isSelected ? <ReviewedOn /> : <ReviewedOff />}
      isSelected={isSelected}
      onClick={() => setIsSelected(!isSelected)}
    />
  );
};

Buttons should generally perform actions, not act as navigational components, so aim to avoid this behaviour. In special circumstances where you need the component to navigate the user somewhere, you can pass the href prop which will render an <a> tag.

<IconButton
  tooltipContent="Visit Google"
  icon={<OpenNewWindow />}
  href="https://www.google.com"
  target="_blank"
/>

Figma Library

Figma.logo

Props

This component takes all valid attributes for <button>.

In cases where the component renders an <a> element, it takes all valid attributes for <a>.

children

Description

IconButtons do not accept children. Use the icon prop to pass the icon.

Type

never

href

Description

Optional href for cases where clicking the button should navigate to another page. Component will render an <a> element instead of a button.

Type

string

icon

Description

Pass in an appropriate Vitality icon that describes the action to be performed.

Type

IconType

Default Value

<Add />

isSelected

Description

For toggle states. State should be handled outside the component and passed in.

Type

boolean

onClick

Description

Action to perform when clicking the IconButton

Type

MouseEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLAnchorElement> & ((event: unknown) => unknown)

size

Type

"compact"

tooltipContentRequired

Description

Support the user to understand what action will be performed

Type

string

© 2025