shadcn.io is an independent project built on shadcn/ui
Outline draws the border and leaves the fill empty. It is easier to spot than a link, and quieter than the filled button.
Use it for Cancel next to Save, or a second action on a card. If it should only show up on hover, ghost on the same Button is lighter. In Svelte, Ark UI keeps that border on the outline button.
Installation
Anatomy
Usage
<Button variant="outline">Button</Button>FAQ
How is an outline Button different from the filled one?
variant="outline" draws a border on the background and uses a muted hover. The default Button uses the primary fill. Outline is an action people should see, without it being the main one.
When should I pick outline instead of secondary?
Outline keeps the page background and adds a border, so it still reads on a tinted surface. variant="secondary" brings its own muted fill. Cancel beside Save is a common outline. Duplicate in a toolbar is often secondary.
How do I change the label?
Replace the children. The demo says Button. Cancel, Back, or View details tells people what happens.
Can an outline Button be a delete?
A delete is clearer as variant="destructive", which uses the danger color. Outline reads as optional. If every button in the row is an outline, none of them looks primary.
API Reference
Button
Sets variant="outline". The rest is on the Button page.
