IconButton
An icon-only action that shares TRButton visuals and requires an accessible name.
Contract
Use IconButton for a familiar action whose icon is unambiguous in context. Every instance requires exactly one accessible name: provide aria-label for a direct name or aria-labelledby when visible text elsewhere names the action. Keep the icon decorative with aria-hidden="true" so it does not compete with that name.
| Axis | Values | Default | Use |
|---|---|---|---|
variant | secondary, primary, danger | secondary | Communicates action intent. |
appearance | solid, outline, ghost | solid | Changes emphasis without changing intent. |
uiSize | md, lg | md | Sets a square target and its icon size. |
| state | disabled, loading | interactive | Uses native disabled behavior; loading adds aria-busy and a spinner. |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/icon-button.css';Scroll inside the code area to read long lines.
Imports
import { TRIconButton } from '@tinyrack/ui/components/icon-button';Scroll inside the code area to read long lines.
Playground
Usage
Settings action permalink
Name the action rather than the icon, and preserve normal event handling.
Examples
Action states permalink
Loading replaces the icon with a decorative spinner and uses loadingLabel as the temporary accessible name; disabled remains a native button state.
Appearance permalink
Choose solid for the strongest emphasis, outline for a visible boundary, and ghost for low-emphasis toolbar actions.
Action intent permalink
Use primary for the main action and danger only for destructive actions; secondary is the neutral default.
Sizes permalink
Match the icon button size to adjacent controls and preserve an adequate target for the input method.
API
TRIconButtonrequires eitheraria-labeloraria-labelledby, accepts one icon aschildren, and forwards Button props, native attributes, events,className,style, React 19ref, and Base UIrendercomposition.typedefaults tobutton; settype="submit"intentionally when the icon action submits a form.loadingdisables activation, setsaria-busy, hides the original icon, and renders a decorative spinner.loadingLabeltemporarily replacesaria-label; anaria-labelledbyname remains intact when no replacement is supplied.--tr-btn-heightcustomizes both dimensions of the square target.--tr-icon-button-icon-sizecustomizes a direct SVG icon. Other Button color, radius, focus, motion, and disabled tokens remain available.- The IconButton CSS subpath includes its Button and Spinner dependencies.