Button

Installation

pnpm dlx shadcn@latest add @paneui/button

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

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

Use pills for calls to action on landing pages and pictures.

Use when the button takes the reader somewhere else.

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" | "inverse" | "glass"; Visual style. inverse is a foreground-coloured fill; glass is a translucent card that lets a picture behind it through.
size= "default": "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"; Height and padding. xs is 24px, sm 28px, default 32px, lg 36px and xl 44px (hero calls to action). Corners follow --radius-control, half of it at xs. icon* sizes are square.
shape= "default": "default" | "pill"; pill rounds the ends fully. A lg pill keeps a 13px label and 16px padding; an xl pill widens to 24px padding from the sm breakpoint.
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" \| "inverse" \| "glass"	"default"	Visual style. `inverse` is a foreground-coloured fill; `glass` is a translucent card that lets a picture behind it through.
size	"default" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	Height and padding. `xs` is 24px, `sm` 28px, `default` 32px, `lg` 36px and `xl` 44px (hero calls to action). Corners follow `--radius-control`, half of it at `xs`. `icon*` sizes are square.
shape	"default" \| "pill"	"default"	`pill` rounds the ends fully. A `lg` pill keeps a 13px label and 16px padding; an `xl` pill widens to 24px padding from the `sm` breakpoint.
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.

Trailing arrow for a link button. It moves 2px toward the destination on hover (not under reduced motion) and mirrors in right-to-left layouts.

external= false: boolean; Shows the leave-the-site glyph instead, which stays still.
className: string; Merged last.

Prop	Type	Default	Description
external	boolean	false	Shows the leave-the-site glyph instead, which stays still.
className	string	—	Merged last.

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

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