Components
Button
Four variants, two sizes, and an icon-only form that still has a name.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/button.jsonVariants
default is the workhorse — an outline on a raised surface. primary is the
one action a screen is steering you toward, so a screen with two primaries has a
decision problem, not a styling problem. ghost drops the outline for dense
toolbars. destructive is reserved for actions that remove something.
Icon-only buttons need a label
IconButton takes a required label. It is not decorative — it becomes the
accessible name, and without it the control is a mystery to anyone not looking
at it.
<IconButton label="More options">
<IconMore />
</IconButton>A Tooltip around it is a description, not a replacement — the button still
needs its own label.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "ghost" | "destructive" | "default" | Visual weight and intent. |
| size | "sm" | "md" | "md" | Compact rows use sm. |
| icon | ReactNode | — | Leading glyph, sized 15 to match the label. |
| disabled | boolean | false | Also drops the shadow, so it does not read as pressable. |