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

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 an Attachment" icon={<Paperclip />} />
<IconButton tooltipContent="Add a ToDo" icon={<List />} />
<IconButton tooltipContent="Move to Pending" icon={<Clock />} />
<IconButton tooltipContent="Document printing not available" disabled icon={<Printer />} />
<IconButton tooltipContent="Visit Site" href="https://www.google.com" icon={<SquareArrowOutUpRight />} />

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={<Trash />} />
<IconButton tooltipContent="More Options" icon={<EllipsisVertical />} />

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

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={<Syringe />} />

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={<Plus />} />
    <IconButton tooltipContent="Delete this Medication" icon={<Trash />} />
    <Button>Edit</Button>
  </Stack>
  <Typography variant="sectionSubtitle">Compact Size</Typography>
  <Stack direction="horizontal" align="center" spacing="sm">
    <IconButton
      tooltipContent="Add new Medication"
      icon={<Plus />}
      size="compact"
    />
    <IconButton
      tooltipContent="Delete this Medication"
      icon={<Trash />}
      size="compact"
    />
    <Button size="compact">Edit</Button>
  </Stack>
</Stack>

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}>
      <Bell />
    </Badge>
  }
/>

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 ? <Eye /> : <EyeOff />}
      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={<SquareArrowOutUpRight />}
  href="https://www.google.com"
  target="_blank"
/>

This component takes all valid attributes for <button>.

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