Icon button

Square icon-only control for compact actions (close, more, toggle) — no dedicated NxKit wrapper, apply the class directly.

Preview

Default + disabled Icon-only button with a required aria-label.

Preview

⋯ ×

HTMLReact

Copy

<button class="nx-iconbtn" aria-label="More options">⋯</button> <button class="nx-iconbtn" aria-label="Locked" disabled>×</button>

Copy

<button className="nx-iconbtn" aria-label="More options">⋯</button>
<button className="nx-iconbtn" aria-label="Locked" disabled>×</button>

API

Classes

Framework-agnostic classes

Class	Description
.nx-iconbtn	Square icon-only button, --nx-iconbtn-size
.has-text	Showcase-only variant for a short-word toolbar button (e.g. RTL)

States

disabled

State

×

Accessibility

• Always pass aria-label — the glyph carries no accessible name on its own.
• `:focus-visible` shows the ink outline; `:disabled` sets pointer-events:none.

Do / Don’t

• ✓Do: Always give it an aria-label.✕Don’t: Don't rely on a tooltip alone for the accessible name.

Related

Button Tooltip

View in spec →

View source: registry.js ↗