Icon Button

Square icon-only action button primitive enforcing mandatory aria-label prop and control radius (--radius-lg).

// Plain markup
import { IconButton } from "@shavin/ui";

Variants (tone=accent)

import { IconButton } from "@shavin/ui";
import { Plus } from "lucide-react";

<IconButton variant="solid" aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton variant="soft" aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton variant="outline" aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton variant="ghost" aria-label="Add"><Plus className="h-full w-full" /></IconButton>

Tone=danger

import { IconButton } from "@shavin/ui";
import { Trash2 } from "lucide-react";

<IconButton variant="solid" tone="danger" aria-label="Delete"><Trash2 className="h-full w-full" /></IconButton>
<IconButton variant="soft" tone="danger" aria-label="Delete"><Trash2 className="h-full w-full" /></IconButton>
<IconButton variant="outline" tone="danger" aria-label="Delete"><Trash2 className="h-full w-full" /></IconButton>
<IconButton variant="ghost" tone="danger" aria-label="Delete"><Trash2 className="h-full w-full" /></IconButton>

Sizes

import { IconButton } from "@shavin/ui";
import { Plus } from "lucide-react";

<IconButton size="sm" variant="soft" aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton size="md" variant="soft" aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton size="lg" variant="soft" aria-label="Add"><Plus className="h-full w-full" /></IconButton>

Disabled

import { IconButton } from "@shavin/ui";
import { Plus, Trash2 } from "lucide-react";

<IconButton disabled aria-label="Add"><Plus className="h-full w-full" /></IconButton>
<IconButton variant="ghost" disabled aria-label="Delete" tone="danger"><Trash2 className="h-full w-full" /></IconButton>

Props

Prop	Type	Default
children*	ReactNode	—
variant	"solid" \| "soft" \| "outline" \| "ghost"	"solid"
tone	"accent" \| "danger"	"accent"
size	"sm" \| "md" \| "lg"	"md"

* required