Components
Preview
Variants
Icons and sizes
Loading
Installation
$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/button.jsonUsage
import { Button } from "@/components/ui/button";
<Button variant="primary" loading={saving}>
Save changes
</Button>;API Reference
| Prop | Values | Default |
|---|---|---|
| variant | primary, secondary, tertiary, ghost, destructive | default (primary appearance) |
| size | default, compact, icon, icon-compact; existing sm, lg, icon-sm, icon-lg | inherited density |
| loading | boolean | false |
| active | boolean | false |
| leadingIcon / trailingIcon | SVG component | — |
| disabled | boolean | false |
| density | default, compact | SizeProvider |
| shape | rounded, pill | ShapeProvider |
| render | Base UI render element or callback | button |
Existing default, outline and link variants remain available. For a link, use render={<a href="/" />}. Base UI handles disabled interaction. Loading disables activation and preserves the label. Icon-only buttons need an accessible label.