Skip to content
Borneo Design System

Icon Button

Stable

A button whose whole label is an icon. It saves space in toolbars and dense rows, and in exchange it must always carry an accessible name.

Added in v1.0.0 · import from "@borneo/react"

Interactive previewPermalink to this section

The label prop is what a screen reader announces. Try it with the browser's accessibility inspector open.

Variant
Size
Shape
State
icon-button-preview.tsx
<IconButton
  label="Edit project"
  icon={<Pencil />}
  variant="ghost"
  size="md"
/>

AnatomyPermalink to this section

aria-label=“Delete project”

VariantsPermalink to this section

Ghost is the default because icon buttons usually live inside another surface. Reach for a filled variant only when the action is the point of the row.

Ghost

Toolbars, table rows

Secondary

Standalone actions

Outline

On tinted surfaces

Primary

Composer send, floating action

Destructive

Remove a row

Round

Beside avatars and media

Sizes and statesPermalink to this section

Sizes are square by definition, so the width follows the height. Loading and disabled behave exactly as they do on Button.

Related components