OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Icon Button

Displays a ghost button used with an icon.

 <IconButton>
  <MagnifyingGlassIcon />
</IconButton>

API Reference

Prop	Type	Default
`color`	`"gray" \| "purple" \| "green" \| "red"`	`"gray"`
`size`	`"1" \| "2" \| "3"`	`"2"`

This component is based on the button element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Make sure to use a tooltip to provide an accessible label to the button.

 <Tooltip content="Search">
  <IconButton>
    <MagnifyingGlassIcon />
  </IconButton>
</Tooltip>

Colors

Use the color prop to control the color of the button.

 <Flex align="center" gap="4">
  <IconButton color="gray">
    <MagnifyingGlassIcon />
  </IconButton>
  <IconButton color="purple">
    <MagnifyingGlassIcon />
  </IconButton>
  <IconButton color="green">
    <MagnifyingGlassIcon />
  </IconButton>
  <IconButton color="red">
    <MagnifyingGlassIcon />
  </IconButton>
</Flex>

Sizes

Use the size prop to control the size of the button.

 <Flex align="center" gap="4">
  <IconButton size="1">
    <MagnifyingGlassIcon />
  </IconButton>
  <IconButton size="2">
    <MagnifyingGlassIcon />
  </IconButton>
  <IconButton size="3">
    <MagnifyingGlassIcon />
  </IconButton>
</Flex>

States

A button can represent different types of state that may or may not be mutually exclusive. Most of these can be represented by props inherited from the button element, such as disabled and readOnly.

Use the loading prop to indicate that the button is in a loading state. When loading is true, the button is disabled whether or not the disabled prop is set.

When button changes to a loading state, screen readers announce “Loading, please wait.”

 <Flex direction="column" gap="4">
  <Flex align="center" gap="4">
    <IconButton color="gray">
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="purple">
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="green">
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="red">
      <MagnifyingGlassIcon />
    </IconButton>
  </Flex>
  <Flex align="center" gap="4">
    <IconButton color="gray" disabled>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="purple" disabled>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="green" disabled>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="red" disabled>
      <MagnifyingGlassIcon />
    </IconButton>
  </Flex>
  <Flex align="center" gap="4">
    <IconButton color="gray" loading>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="purple" loading>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="green" loading>
      <MagnifyingGlassIcon />
    </IconButton>
    <IconButton color="red" loading>
      <MagnifyingGlassIcon />
    </IconButton>
  </Flex>
</Flex>

Loading and disabled buttons are focusable for accessibility reasons, but can’t be clicked and don’t submit forms.

 <Grid columns="2" gap="4">
  <form onSubmit={() => alert('Submit!')}>
    <TextField.Root placeholder="Email">
      <TextField.Slot side="right">
        <Tooltip content="Submit">
          <IconButton size="1">
            <ArrowRightIcon />
          </IconButton>
        </Tooltip>
      </TextField.Slot>
    </TextField.Root>
  </form>

  <form onSubmit={() => alert('Submit!')}>
    <TextField.Root placeholder="Email" defaultValue="design@workos.com">
      <TextField.Slot side="right">
        <Tooltip content="Submit">
          <IconButton size="1" loading>
            <ArrowRightIcon />
          </IconButton>
        </Tooltip>
      </TextField.Slot>
    </TextField.Root>
  </form>
</Grid>