Button

Installation

pnpm dlx shadcn@latest add @paneui/button

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

<Button variant="secondary">Button</Button>

Built on the Button primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Button.

variant= "default": "default" | "secondary" | "outline" | "ghost" | "destructive" | "link"; Visual style.
size= "default": "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"; Height and padding. xs is 24px, sm 28px, default 32px and lg 36px, all with a 10px radius except xs at 6px. icon* sizes are square.
render: ReactElement | (props, state) => ReactElement; Replace the rendered element, e.g. <a /> or a router Link.
nativeButton= true: boolean; Set to false when render is not a <button> so keyboard and ARIA behaviour is added.
disabled= false: boolean; Disables interaction and dims the button.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"	"default"	Visual style.
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	Height and padding. `xs` is 24px, `sm` 28px, `default` 32px and `lg` 36px, all with a 10px radius except `xs` at 6px. `icon*` sizes are square.
render	ReactElement \| (props, state) => ReactElement	—	Replace the rendered element, e.g. `<a />` or a router `Link`.
nativeButton	boolean	true	Set to `false` when `render` is not a `<button>` so keyboard and ARIA behaviour is added.
disabled	boolean	false	Disables interaction and dims the button.

The cva function behind Button, for styling other elements like a button.

Prop	Type	Default	Description
variant	same as Button	—
size	same as Button	—
className	string	—	Merged last.