Button
Eight variants, seven sizes, a width-stable loading state and `buttonVariants()` for links that should look like buttons.
3 files · 147 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/button.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs buttonUsage
import { Button, buttonVariants } from "@/components/opus/ui/button";
<Button variant="glow" size="lg" loading={saving}>Deploy</Button>
<a href="/docs" className={buttonVariants({ variant: "outline" })}>Docs</a>Examples
Sizes, icons & loading
Loading keeps the button width so the layout never jumps.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "outline" | "soft" | "ghost" | "destructive" | "link" | "glow" | "primary" | Visual style. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-xs" | "md" | Height and padding. icon sizes are square. |
| loading | boolean | false | Spinner overlay; disables the button and sets aria-busy. |
| ...props | ButtonHTMLAttributes | — | Everything a native <button> accepts, including ref. |