Overview

UsageComing soon

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Icon Button

Displays a ghost button used with an icon.

 <IconButton>
  <MagnifyingGlassIcon />
</IconButton>

Props

`asChild`

boolean

`color`

grayredpurplegreen

`fullyDisabled`

boolean

By default, the `disabled` prop will use the `aria-disabled` attribute to ensure that content remains focusable and accessible even when in a disabled state. If you are sure you want to disable the button and take measures to ensure its accessibility, you can set this prop to `true` to use the `disabled` attribute instead.

`loading`

boolean

`size`

123

Deprecated

`state`

deprecated

disablednormalloading

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

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>

Loading and disabled

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>

Variants

Dashboard

8 variants found

size 2 iconbutton in Edit Brandingdashboard

/branding/edit

size=2

size 2 iconbutton in Members Tabledashboard

size=2

size 1 iconbutton in Add Child Buttondashboard

/:environmentId/roles-and-permissions/resource-types/edit/editable-resource-types-graph

color=graysize=1

size 1 iconbutton in Close Buttondashboard

color=graysize=1

size 1 iconbutton in Flag Environment Carddashboard

size=1

size 1 iconbutton in Flag Environment Carddashboard

size=1

IconButton in Authkit Setup Prompt Carddashboard

color=gray

IconButton in Client Secretsdashboard

/:environmentId/applications/:applicationId

color=gray

Admin Portal

2 variants found

IconButton in Recording List Viewadmin-portal

IconButton in Headeradmin-portal

Context

Prop	Type	Default	Required
`asChild`	`boolean`	—	no
`color`	`"gray" \| "red" \| "purple" \| "green"`	—	no
`fullyDisabled`	`boolean`	—	no
`loading`	`boolean`	—	no
`size`	`"1" \| "2" \| "3"`	—	no
`state`deprecated	`"disabled" \| "normal" \| "loading"`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "loading"

Usage

Used 93 times across 2 packages

Dashboard

Admin Portal

Variant Distribution

size

88%

12%

color

gray

100%

Where it's used

76 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx3

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/custom-element-accordion.tsx2

/:environmentId/roles-and-permissions/resource-types/resource-types-graph

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/roles-and-permissions/resource-types/resource-types-graph/zoom-controls.tsx3

packages/admin-portal/src/admin-portal-debugger/navigation.tsx3

packages/dashboard/src/components/ai-chat/chat-header.tsx2

packages/dashboard/src/components/ai-chat/message-feedback.tsx2

packages/dashboard/src/components/date-input-picker.tsx2

packages/dashboard/src/components/flags/flag-environment-card.tsx2

packages/dashboard/src/components/organizations/upsert-organization-dialog.tsx2

packages/dashboard/src/components/radar/configuration-page/dialogs/restricted-list-field.tsx2

Show 66 more files

Icon Button

On this page

Props

`asChild`

`color`

`fullyDisabled`

`loading`

`size`

Deprecated

`state`

Usage

With a tooltip

Colors

Sizes

Loading and disabled

Variants

Dashboard

Admin Portal

Context

Full API Reference

Deprecated

Usage Statistics

Usage

Variant Distribution

Where it's used

Icon Button

Props

asChild

color

fullyDisabled

loading

size

Deprecated

state

Usage

With a tooltip

Colors

Sizes

Loading and disabled

Variants

Dashboard

Admin Portal

Context

Full API Reference

Full API Reference

Deprecated1

Deprecated

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`asChild`

`color`

`fullyDisabled`

`loading`

`size`

`state`