Core / Buttons

Icon Button

A compact action button whose content is an icon.

Preview

import { IconButton } from "@/components/ui/design-system/core/buttons/IconButton"

<IconButton aria-label="Add item"><Plus /></IconButton>

Full library

pnpm install:project /absolute/path/to/your-project

Manual install

The guided installer is the next library milestone. This component will be selectable as Core → Buttons → Icon Button.

<IconButton aria-label="Add item"><Plus /></IconButton>

Use className for local presentation. The element exposes data-slot, data-variant, and data-size selectors.

<IconButton aria-label="Add item" className="rounded-full px-6 shadow-sm"><Plus /></IconButton>

An icon-only control must have an aria-label. Pair unfamiliar icons with a Tooltip, but do not treat the tooltip as the only accessible name.

Attribute	Type	Default	Required	Purpose
`children`	`ReactNode`	—	Yes	Icon content.
`aria-label`	`string`	—	Yes	Accessible name describing the action.
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"`	"ghost"	No	Semantic action treatment.
`size`	`"sm" \| "md" \| "lg"`	"md"	No	Control size.
`radius`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	"full"	No	Corner treatment.
`className`	`string`	—	No	Local project styling.
`...buttonProps`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	No	Native button attributes including disabled and onClick.