IconButton

When to use

IconButton is for frequent actions whose icon is well known: close, add, a more-actions menu, delete in a table row.

When not to use

• When the icon is not well known: Use a Button with text; an action such as “Export” is not clear from an icon alone.
• For the main action of a page: The main action carries text; use a primary Button.
• To go to another page: Use a Link.
• For a setting that stays on or off: Use a Toggle.

Anatomy

LightDark

Copy code

import { IconButton } from '@bigbang/ui';

export default function Default() {
  return <IconButton icon="x" label="Close" />;
}

1. Box: a 32, 36 or 40 px square set by size; corner radius button-radius, fully round with circle.
2. Icon: a registered icon (icon), sized by button-icon-size-*, with aria-hidden.
3. Accessible name: not visible; the label text is set as aria-label.

Behaviour

• Click, Enter and Space run the action; IconButton is built on Base UI Button.
• While loading, the icon turns invisible but keeps its space; a spinner turns in the centre and clicks are ignored. The button stays focused.
• disabled removes the button from the tab order. With focusableWhenDisabled it carries aria-disabled and takes focus.
• className is only for margins and placement.

Guidelines

• Give every IconButton a label that starts with a verb: “Close”, “Delete”, “Add”.
• Use one size and variant in a toolbar; group related buttons with ButtonGroup.
• Use tone="danger" for actions that delete, and offer undo or a confirmation.
• On touch screens use at least md (40 px on a touch screen); sm is for dense tables only.

Content

• label is a short verb or verb phrase; do not end it with a full stop.
• Give the same icon the same name everywhere.

Turkish	English
Kapat	Close
Ekle	Add
Sil	Delete
Diğer işlemler	More actions

Glass

variant="glass" suits icon-only controls over a photo or video, such as a close button. Inside a dark data-backdrop it takes the clearer glass with a dimming layer.

Related components

• Button: an action with text.
• Icon: the icon registry and sizes.
• ButtonGroup: groups related buttons.
• Toggle: a two-state button that stays pressed.