Icon Button

A Button with no words: a square box, and a name you cannot forget to give it.

import { IconButton } from "@dede-style/ui/button", then <IconButton glyph={iconClose} label="Close" />. It shares every variant, size, state and focus ring with Button — not by convention but by construction, because there is only one implementation.

Prop	Description	Default	Control
glyph	the icon. In code, import it by its full name: icon plus this (Star is iconStar)`AlertAlertFillArrowDownArrowLeftArrowRightArrowUpBagBell`+90 more	`Star`	Alert AlertFill ArrowDown ArrowLeft ArrowRight ArrowUp Bag Bell BellRing BellSlash Bluetooth Bookmark BookmarkFill Calendar Camera Cart Check CheckBold Checkbox CheckboxChecked CheckboxMixed ChevronDown ChevronLeft ChevronRight ChevronUp ChevronsDownUp ChevronsLeft ChevronsRight ChevronsUpDown Clock Close Code CodeAlt Cookie Copy CreditCard DataChart DataColumns DataGrid DataRows Delete Download DragHandle Edit Email Error ErrorFill ExternalLink Eye EyeSlash File Filter Folder Github Heart HeartFill Help HelpFill Home Image Info InfoFill Link Lock LockOpen LogOut Menu Minus MinusBold Moon MoreHorizontal MoreVertical Pause Placeholder Play Plus Radio RadioChecked Refresh Search Settings Share Shield Star StarFill Stop Success SuccessFill Sun SwapVertical Tag TagFill Upload User Warning WarningFill Wifi WifiSlash
label	required: the button's accessible name, since it has no visible words
variant	emphasis: primary, secondary (default), tertiary or destructive`primarysecondarytertiarydestructive`	`secondary`	primary secondary tertiary destructive
size	24, 32, 40 or 48px square. Use 24 only where space demands it: it is the minimum touch target`681012`	`10`	6 8 10 12
shape	corners: rounded (default), pill (a circle) or square`roundedpillsquare`	`rounded`	rounded pill square
isDisabled	disables the button and dims it	`false`	isDisabled
type	the HTML button type. Default button, so it never submits a form by accident`buttonsubmitreset`	`button`	button submit reset

Tokens

What a theme can move, where the props above are what an instance can move.

Token	Description	Light	Dark
--button-radius-rounded	what shape="rounded" resolves to. Only that shape — pill and square are statements rather than values, so a theme setting this to 0 squares the rounded buttons and leaves pills round	--radius-4	--radius-4
--button-bg-primary	the solid fill. A token rather than the text role, because a fill that happens to match the text colour is still a fill	--neutral-20	--neutral-98
--button-bg-secondary	the soft fill — a resting wash of the same ink the interaction states use, so it darkens on light and lightens on dark. The two modes carry different strengths, which is the one place they disagree	color-mix(in srgb, var(--neutral-20) var(--opacity-1), transparent)	color-mix(in srgb, var(--neutral-98) var(--opacity-2), transparent)
--button-bg-destructive	the coloured fill. Points at --color-error by default; a theme can move the button without moving every other error in the system	--color-error	--color-error

A token appears here only when the value is not already reachable. Anything that resolves through a foundation token or a role needs none, because overriding that already moves it — and a second dial wired to the same value would let this one component drift from everything sharing the role. What is left is the values with no other lever at all.

These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.