A square action with only an icon, a required accessible label and a tooltip-friendly hit area.
IconButton is for compact, well-known actions (close, more, print, remove) where a label would crowd the layout. It takes the same variants as Button, minus the danger secondary, and a pressed state for toggles.
Installation
npx shadcn@latest add KezLahd/rime/icon-buttonAlso installs: base, spinner.
Usage
import { IconButton, IconX } from "@/components/ui";
<IconButton label="Close" icon={<IconX size={18} />} onClick={onClose} />Examples
Variants and states
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
IconButton
| Prop | Type | Default | Description |
|---|---|---|---|
| labelRequired | string | Required: an icon-only control has no other accessible name. | |
| iconRequired | ReactNode | ||
| variant | "ghost" | "secondary" | "primary" | "danger" | "ghost" | |
| size | "sm" | "md" | "lg" | "md" | |
| loading | boolean | ||
| pressed | boolean | Makes it a toggle button (aria-pressed). | |
| asChild | boolean | Render the single child element (a Next <Link>, an <a>) with the icon button's look; pass the icon inside the child. |
Also accepts the native attributes of AriaAttributes, ButtonHTMLAttributes, DOMAttributes, HTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --button-height-lg | var(--control-h-lg) | … |
| --button-height-md | var(--control-h-md) | … |
| --button-height-sm | var(--control-h-sm) | … |
| --icon-button-radius | var(--r-xs) / var(--r-sm) / var(--r-md) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --blur-callout | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --control-h-lg | tokens.css | … |
| --control-h-md | tokens.css | … |
| --control-h-sm | tokens.css | … |
| --danger-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glass-edge-strong | tokens.css | … |
| --glow-md | tokens.css | … |
| --glow-md-hover | tokens.css | … |
| --glow-sm | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --r-xs | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-control | tokens.css | … |
| --shadow-specular | tokens.css | … |
| --shadow-specular-dark | tokens.css | … |
| --surface-solid | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-subtle | tokens.css | … |
Accessibility
- label is required and becomes the accessible name (aria-label); the icon is hidden from assistive tech.
- pressed sets aria-pressed for toggle buttons.
- sm is 28px: only inside dense rows. Use md (36px) or lg (44px) where it is the main target on touch.
Do and don't
Do
- Pair an unfamiliar icon with a Tooltip carrying the same label.
Don't
- Don't use an IconButton for the primary action of a screen; it needs words.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open icon-button.md