Icon Button

ready

Square icon-only button, with an optional count badge.

The Icon Button is the compact, icon-only control in the top bar — the menu toggle, notifications, and profile. It can carry a small count badge.

Anatomy

  1. 1 Icon — single glyph from the Icon set
  2. 2 Hit area — 32×32 square with a hover background
  3. 3 Badge — optional count in the top-right corner

Variants

Default

<IconButton icon="user" label="Profile" />

With count badge

<IconButton icon="bell" label="Notifications" badge={3} />

States

Default

Resting state.

With badge

Carries a count.

Disabled

Non-interactive.

Usage

✓ Do

Use for universally recognised icons (menu, search, close).

✕ Don't

Don't use an icon button when the meaning isn't obvious — use a labelled Button.

Accessibility

  • A label is required and becomes the aria-label, since there is no visible text.
  • The 32×32 hit area keeps the target comfortably tappable.
  • The count badge is decorative; convey the same information through the label or adjacent live region where it matters.

Content

  • The label should name the action (“Open navigation”, “Notifications”).

Props

PropTypeDefaultNotes
iconstring—Icon name (required).
labelstring—Accessible label (required).
sizenumber18Glyph size in px.
badgestring | number—Optional count badge.
disabledbooleanfalseGreys out and blocks interaction.
  • Button — labelled action button.
  • Badge — the count pill used here.
  • Icons — available glyphs.