Scale — Button Icon

Install

Eight visual types, ordered by emphasis. Always pass a label — it becomes the accessible name.

The inverse type is tuned to read on a dark or brand-colored background.

Two sizes — l (default, 24px icon) and s (16px icon).

dense toolbars and overflow actions where a text label won’t fit. If you have room for a label, prefer a Button.

Don’t use an icon button when a text label would fit — use Button.
Don’t invent obscure icons for actions people won’t recognise.
Don’t ship one without a label — the console warns and screen readers fall back to the icon name.

Element: renders a native <button type="button"> — keyboard focusable by default.
Name: the label sets aria-label; with no label it falls back to the icon name and warns in the console.
Activation: Enter / Space activates.
Disabled: disabled removes it from the tab order and blocks pointer events.
Target size: the l size gives a comfortable touch target; prefer it on touch surfaces.
Focus: shows the global keyboard focus ring.