BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

IconButton

Stable
Edit in Studio

A square button with only an icon, for frequent, recognizable actions in toolbars, table rows and headers. Its label is still required: it becomes the accessible name.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • Repeated row actions in tables and lists: edit, copy, delete, more.
  • Toolbars where space is tight and the icons are widely understood (close, copy, search, settings).
  • Opening a Menu of secondary actions (the more icon).

Not for

  • The primary action of a view: give it a text Button.
  • Any icon whose meaning is not obvious without its label: use a Button with iconStart instead.
  • Navigation to another page: use a Link.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Name the action, not the picture

label="Delete token" is what a screen reader says. "Trash" describes the drawing, not what happens.

Do

Pair with a Tooltip showing the same label

Sighted mouse users get the name on hover; keyboard users get it on focus.

Don't

A row of filled icon buttons

Primary icon buttons in every row shout. Keep row actions ghost.

Accessibility

  • label is required and becomes aria-label. The icon itself is aria-hidden.
  • Same keyboard behavior and focus ring as Button. Loading keeps focus and sets aria-busy.
  • The square target matches the control height (32/40/48 comfortable), never smaller than 24px.

Anatomy and tokens

Read from packages/react/src/components/IconButton/IconButton.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

1 tokens 0 semantic or component, change with theme and brand 1 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/IconButton/IconButton.tsx, so this table cannot drift from the code. It also accepts every native <button> attribute except children, aria-label.

Prop Type Default Description
icon required LucideIcon none Lucide icon component.
label required string none Accessible name, required: there is no visible text. Say the action, not the icon ("Delete token", not "Trash").
variant ButtonVariant 'ghost' Default `ghost`: icon buttons usually live in toolbars and rows.
size ButtonSize 'md' No description in the code yet.
loading boolean false No description in the code yet.

Playground

Change the props and see the real IconButton update. Controls are generated from the TypeScript props; nothing here changes the system. 

<IconButton label="Edit token" />

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open IconButton in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

Secondary

Loading

AllStates

Changelog

  • New

    Actions: Button gains `danger` variant, `lg` size, `iconStart`, `iconEnd`, `fullWidth` and `render` (a link stays a link); loading keeps focus. New IconButton, ButtonGroup (spaced or attached) and Link (inline, standalone, subtle, external).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes