IconButton

Variant

The IconButton comes with three main visual styles: primary, secondary (default), and tertiary.

Primary

Use the primary IconButton for the main action in a page.

<Preview>
  <IconButton variant="primaryBrand" iconName="ellipsis-horizontal" />
  <IconButton variant="primaryInfo" iconName="ellipsis-horizontal" />
  <IconButton variant="primarySuccess" iconName="ellipsis-horizontal" />
  <IconButton variant="primaryWarning" iconName="ellipsis-horizontal" />
  <IconButton variant="primaryAlert" iconName="ellipsis-horizontal" />
</Preview>

Secondary

Use the secondary IconButton by default.

<Preview>
  <IconButton variant="secondaryNeutral" iconName="ellipsis-horizontal" />
  <IconButton variant="secondaryInfo" iconName="ellipsis-horizontal" />
  <IconButton variant="secondarySuccess" iconName="ellipsis-horizontal" />
  <IconButton variant="secondaryWarning" iconName="ellipsis-horizontal" />
  <IconButton variant="secondaryAlert" iconName="ellipsis-horizontal" />
</Preview>

Tertiary

Use the tertiary IconButton to display an optional action or an event trigger.

<Preview>
  <IconButton variant="tertiaryBrand" iconName="ellipsis-horizontal" />
  <IconButton variant="tertiaryNeutral" iconName="ellipsis-horizontal" />
  <IconButton variant="tertiaryInfo" iconName="ellipsis-horizontal" />
  <IconButton variant="tertiarySuccess" iconName="ellipsis-horizontal" />
  <IconButton variant="tertiaryWarning" iconName="ellipsis-horizontal" />
  <IconButton variant="tertiaryAlert" iconName="ellipsis-horizontal" />
</Preview>

Margin on tertiary variant

Use the prop hasNegativeMargins to remove the margin around a tertiary IconButton. This prop doesn't have any impact on the primary and secondary IconButton.

<IconButton
  iconName="ellipsis-horizontal"
  variant="tertiaryNeutral"
  hasNegativeMargins
/>

Get element ref

Create a ref using useRef and pass it using the ref prop.

const Demo = () => {
  const ref = useRef<HTMLButtonElement | null>(null);

  return (
    <IconButton
      ref={ref}
      iconName="ellipsis-horizontal"
      variant="secondaryNeutral"
    />
  );
};