Components / primitives

primitives · @awesome-ds/react

IconButton

Icon-only control requiring an accessible name.

Rules: rule.a11y.wcag-aa

State matrix

idlerequired
disabledrequired
loadingrequired

Anatomy

  • native button
  • decorative icon
  • accessible label

Keyboard contract

Enter and Space activate the control; focus uses the shared focus ring.

Screen-reader contract

label supplies the required accessible name and the icon is presentation-only.

Content rules

  • Use a familiar single-purpose icon.
  • Describe the action, not the icon shape.

Public API

PropTyperequiredDescription
labelstringrequiredAccessible action name
loadingboolean—Prevents duplicate actions
childrenReactNoderequiredIcon artwork
…nativeButtonHTMLAttributes<HTMLButtonElement>—Native button attributes

Adaptation contracts

RTL
Preserve icon meaning, use logical spacing, and mirror only directional artwork.
High contrast
Keep native outlines and a visible text or border affordance in forced colors.
Reduced motion
Remove hover travel and loading flourish while retaining immediate state feedback.

Verification IDs

IconButton/requires-label

Live

Live

Copyable example

import { IconButton } from "@awesome-ds/react";

<IconButton label="Close">×</IconButton>