Button
Displays a button or a component that looks like a button.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/button.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
Usage
How to use this component in your code.
{/* Variants */}
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
{/* Sizes */}
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
{/* With Icons */}
<Button><Plus /> Create New</Button>
<Button variant="outline">Download <Download /></Button>
{/* Icon Only */}
<Button size="icon"><Heart /></Button>
<Button size="icon-sm"><Settings /></Button>
{/* As Link */}
<Button asChild><a href="#">Link</a></Button>