← All components

Component

IconButton

Square, icon-only control — toolbars, cards, close/menu affordances. Always provide a label for a11y.

IconButton.jsx IconButton.d.ts Button.prompt.md Open raw preview HTML

Live demo

Rendered with the actual component source, not a re-implementation.

Usage

import { IconButton } from "./IconButton.jsx";

<IconButton variant="solid" label="Add" icon={<Plus/>} />

Props

IconButton props — see the source .d.ts for the complete type.
PropTypeDefaultDescription
iconReactNodeIcon node (e.g. a Lucide <svg>).
labelstringAccessible label (also used as the tooltip).
variant"quiet" | "solid" | "outline""quiet"Visual style.
size"sm" | "md" | "lg""md"Size.
disabledbooleanDisable interaction.