Buttons & CTAs / Button

Icon Button

Circular icon-only button. Available in ghost, outlined, tonal, and filled variants, across brand (violet) and neutral (black) themes, in small (28×28) and medium (36×36) sizes.

V 1.0View in Storybook

Controls

Variant

Theme

Size

Icon

Variants

Full matrixAll 4 variants × 2 themes × 2 sizes

ghostoutlinedtonalfilledbrand smbrand mdneutral smneutral md

Props

Name

Type

Default

variant

'filled' | 'outlined' | 'ghost' | 'tonal'

'ghost'

theme

'brand' | 'neutral'

'neutral'

size

'sm' | 'md'

'md'

icon

ReactNode

—

aria-label

string

—

Code

import { IconButton } from '@/src/components/Button/Button'

<IconButton
  variant="outlined"
  theme="brand"
  size="md"
  aria-label="Add"
  icon={<PlusIcon />}
/>