Button
Action trigger with variant, size, and shape options. Shares its styling with LinkButton.
Installation
npx @cloudflare/nimbus-docs add buttonyarn dlx @cloudflare/nimbus-docs add buttonpnpm dlx @cloudflare/nimbus-docs add buttonbunx @cloudflare/nimbus-docs add buttonPreview
<Button variant="primary">Save</Button>Examples
Variants
Six intents for different levels of emphasis and risk.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="secondary-destructive">Secondary destructive</Button>Sizes
Four scales, from compact toolbars to prominent calls to action.
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="base">Base</Button>
<Button size="lg">Large</Button>With an icon
Pass an Iconify name to icon to render a leading glyph.
<Button variant="primary" icon="ph:plus">Create</Button>
<Button variant="secondary" icon="ph:download-simple">Download</Button>Icon-only
Use shape="square" or shape="circle" for icon-only buttons, and always pass an aria-label.
<Button shape="square" icon="ph:gear" aria-label="Settings" />
<Button shape="circle" icon="ph:heart" aria-label="Like" />Loading
loading swaps the icon for a spinner and disables the button.
<Button variant="primary" loading>Saving…</Button>API reference
Every prop the component accepts, sourced from a single declaration.
| Prop | Type |
|---|---|
variant | "primary" | "secondary" | "ghost" | "destructive" | "secondary-destructive" | "outline" |
size | "xs" | "sm" | "base" | "lg" |
shape | "base" | "square" | "circle" |
icon | string |
loading | boolean |