import { IconButton } from "@nodus/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
iconreq | ReactNode | — | Icon content to render |
labelreq | string | — | Accessible label for the button |
size | "sm" | "md" | "lg" | "md" | Icon button size |
variant | "primary" | "secondary" | "ghost" | "danger" | "ghost" | Visual style variant |
iconrequiredType
ReactNodeDefault —Icon content to render
labelrequiredType
stringDefault —Accessible label for the button
sizeType
"sm" | "md" | "lg"Default "md"Icon button size
variantType
"primary" | "secondary" | "ghost" | "danger"Default "ghost"Visual style variant
Accessibility
- The required label prop is applied as aria-label on the button — icon-only buttons are accessible by default.
- Touch target meets 44×44px minimum at all sizes (sm=32px padded, md=40px, lg=48px).
- Rendered as a native <button> — keyboard focusable and operable via Enter/Space.
MobileTouch Target
Icon-only buttons are high-risk on mobile. Apply min-h-[44px] min-w-[44px] via padding or use size='lg'. Never place icon-buttons in tight rows without sufficient spacing.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?