Button

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/button.json

import { Button } from "@/components/ui/button";

<Button variant="outline" size="lg">Save changes</Button>

sm, md (default), lg, plus square icon-sm, icon, icon-lg for icon-only buttons. Icon-only buttons need an aria-label.

Any SVG inside the button is sized automatically per button size.

loading shows a centered spinner, disables the button, and preserves its width so layouts don't shift.

Prop	Type	Default
`variant`	`primary · secondary · outline · ghost · destructive · link`	`primary`
`size`	`sm · md · lg · icon-sm · icon · icon-lg`	`md`
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`
`render`	`ReactElement`	renders as `<button>`

Also accepts all native button props. Use render to compose with links: <Button render={<a href="/docs" />}>Docs</Button>.

Built on Base UI Button: correct semantics with render, and focusableWhenDisabled support.
Keyboard: focusable via Tab, activates with Enter and Space, visible focus ring from the global --ring token.
Loading buttons stay in the layout and announce the spinner via role="status".