Button
The one people click.
Variants
Pick by weight: default for the action you want, ghost for the ones you do not.
Six looks and four sizes, all from the same component. A button gives way slightly when pressed, shows a pointer cursor, and keeps a visible ring when reached with the keyboard — three things a plain <button> does not do on its own.
Installation
npx philcn@latest add buttonThe file is written into your project. It is yours from then on — change it as you like.
Examples
Sizes
Four sizes. The icon size is square and needs a label of its own for screen readers.
As a link
When the click should navigate, render a real link and keep the button's looks. Both spellings work.
Props
| Prop | Type | What it does |
|---|---|---|
| Button.variant | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | How much weight the button carries. Anything but default steps back. |
| Button.size | "default" | "icon" | "lg" | "sm" | null | Height and padding. `icon` is square, for a button that holds nothing but a glyph. |
| Button.asChild | boolean | Hands the styling to the single child instead of rendering a <button>. The Radix spelling. |
| Button.render | ReactElement<unknown, string | JSXElementConstructor<any>> | The same thing, written the way the current shadcn documentation writes it. |
Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <button>.
Worth knowing
- A disabled button stops receiving mouse events, so it shows no pointer cursor — that is the browser, not a bug.
- The `link` variant does not shrink when pressed: text should not move under the reader's finger.