Components

IconButton

Square or round affordance for a single glyph — ghost, outline, or solid.

Preview

components/core/IconButton.jsx

For a labelled action, use Button. IconButton is for single-glyph affordances only — play, share, menu, close.

Usage

src/components/ui/IconButton.tsx

tsx

import { IconButton } from "@/components/ui/IconButton";
import { Play, Share2 } from "lucide-react";

<IconButton label="Share" variant="outline">
  <Share2 size={16} />
</IconButton>

<IconButton label="Play" variant="solid" round>
  <Play size={16} />
</IconButton>

API

props

Prop	Type	Default	Description
label	string	—	Accessible name (aria-label + tooltip) — required; there is no visible text.
variant	"ghost" \| "outline" \| "solid"	"ghost"	ghost fills on hover · outline carries the hairline border · solid paints the contrast surface.
size	number	40	Square side in px.
round	boolean	false	Fully circular instead of --radius-sm corners.
disabled	boolean	false	Dims to 0.4 opacity and blocks the hover state.
children	ReactNode	—	One inline SVG glyph — stroke 2, currentColor.

Tokens consumed

semantic only

--color-fg--color-fg-muted--color-bg-hover--color-border--color-border-hover--surface-contrast--on-contrast--radius-sm--transition-hover