Primitives

Button

We made the button move so you'd click the button.

Polymorphic button with five variants: glow (pulsing gradient halo), shimmer (animated highlight sweep), ghost (outlined), solid (gradient fill), and wave (pill with an animated rainbow wrapping its bottom border, the MUI 'Edit in Chat' treatment). Pass `as` to render an `<a>` or routed link.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/button.json

Examples

All five variants
<Button variant="glow" sparkle>Generate</Button>
<Button variant="shimmer">Start building</Button>
<Button variant="ghost">Talk to sales</Button>
<Button variant="solid">Upgrade</Button>
<Button variant="wave">Request a demo</Button>
Sizes
<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>
Loading
<Button variant="glow" loading>Shipping…</Button>
As an anchor
Read the docs 
<Button as="a" href="/docs" variant="ghost">Read the docs</Button>

Props

PropTypeDefaultDescription
variant"glow" | "shimmer" | "ghost" | "solid" | "wave""glow"Visual style.
size"sm" | "md" | "lg""md"Padding + font.
sparkleboolean-Append a ✦ after the label.
loadingboolean-Show spinner + disable.
blockboolean-Render full-width.
asstring"button"Polymorphic tag.
Next StickyBanner ] →