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.

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

Secondary

Use the secondary IconButton by default.

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

Tertiary

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

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

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"
  aria-label="Menu"
  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"
      aria-label="Menu"
    />
  );
};

Variant

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

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

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

Use the secondary IconButton by default.

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

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

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

const Demo = () => { const ref = useRef<HTMLButtonElement | null>(null); return ( <IconButton ref={ref} iconName="ellipsis-horizontal" variant="secondaryNeutral" aria-label="Menu" /> ); };