Foundations
Action Button
Silver primary, secondary, quiet and danger buttons in two sizes, with icons, loading and icon-only buttons.
2 variantsMIT
Preview
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/action-button.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Check, Trash } from "@phosphor-icons/react";
import { Button, IconButton } from "@/components/ui/action-button";
<Button variant="primary" icon={Check} iconWeight="bold" onClick={approve}>
Approve
</Button>
<Button variant="secondary" loading={saving}>Save</Button>
<IconButton icon={Trash} label="Delete" variant="danger" onClick={remove} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "quiet" | "danger" | "secondary" | Primary is the silver gradient; use one per view. |
| size | "sm" | "md" | "sm" | Height 32px or 36px. |
| icon | Icon | — | Leading Phosphor icon. |
| iconWeight | "fill" | "bold" | "fill" | Use bold for line glyphs like check, x and arrows. |
| loading | boolean | false | Swaps the icon for a spinner and disables the button. |
| IconButton.label* | string | — | Accessible name of an icon-only button; also its native title unless `tooltip` is set. |
| IconButton.tooltip | ReactNode | true | — | Shows our Tooltip instead of the native title. `true` reuses the label. Wrapping an IconButton in Tooltip also drops the title. |
| IconButton.tooltipSide / tooltipAlign | "top" | "bottom" / "start" | "center" | "end" | "top" / "center" | Where the tooltip sits relative to the button. |