Actions / IconButton
IconButton
A round sticker with just an icon. The label is required, so it can never ship without a name.
Client componentWCAG AASince v0.1
import { IconButton, PhoneIcon, PlusIcon } from "@plop-ui/react";
<IconButton icon={<PlusIcon />} label="New incident" variant="mustard" />
<IconButton icon={<PhoneIcon />} label="Start SOS call" variant="tomato" />
// Hand-drawn icons in the same marker line:
// PlusIcon CloseIcon CheckIcon CopyIcon LinkIcon SearchIcon ArrowDownIcon ArrowRightIcon
// ExternalIcon MenuIcon PinIcon PhoneIcon BellIcon HapticsIcon SoundIcon (both take `off`)Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| icon required | ReactNode | — | The icon. Decorative: it is hidden from screen readers. |
| label required | string | — | What the button does, e.g. "Start SOS call". Required: it becomes the accessible name. |
| burst | boolean | BurstStyle | readonly string[] | none | What flies out on click. `true` picks for the variant: confetti for most, a `"poof"` of dust (and a little head-shake) for `tomato`, the cancel/delete color. Or force `"confetti"` / `"poof"`, pass your own colors, or `false` for nothing. Skipped under reduced motion. |
| loading | boolean | false | Shows a busy state, sets `aria-busy` and ignores clicks. |
| loadingLabel | string | "Loading" | Screen reader text while loading. |
| seed | string | number | React's useId() | Seeds the default tilt so it never changes between renders. |
| shadow | "soft" | "solid" | "stripes" | "outline" | "none" | PlopProvider's stickerShadow, which defaults to soft | The shadow under the sticker: `soft` (a flat, quiet offset), `solid` (ink), `stripes` (crayon hatching), `outline` or `none`. |
| size | "sm" | "md" | "lg" | md | Sticker size: `sm` for dense rows, `lg` for the one hero action. |
| tilt | number | a small seeded tilt; pass 0 to sit straight | Rotation in degrees. |
| variant | "ink" | "periwinkle" | "mint" | "tomato" | "mustard" | "plain" | ink | Spot color printed under the ink. |
Also takes every attribute of <button> (286 more, e.g. onClick, className, aria-*).
Use it well
DoUse it for actions everyone already recognizes: call, close, add.
Don'tHide an unusual action behind an icon. If it needs explaining, use a Button.
Accessibility
- label becomes aria-label; leaving it out is a TypeScript error.
- The icon is hidden from screen readers.
- Same keyboard, focus and press behavior as Button.