Button
---import { Button } from "@/components/starwind/button";---
<Button>Button</Button>Installation
pnpx starwind@latest add buttonnpx starwind@latest add buttonyarn dlx starwind@latest add buttonLink
The Button component can also function as a link (<a> tag) by providing an href prop.
---import { Button } from "@/components/starwind/button";---
<Button href="#link">Button</Button>Usage
variant
---import { Button } from "@/components/starwind/button";---
<Button variant="default">default</Button><Button variant="primary">primary</Button><Button variant="secondary">secondary</Button><Button variant="outline">outline</Button><Button variant="ghost">ghost</Button><Button variant="info">info</Button><Button variant="success">success</Button><Button variant="warning">warning</Button><Button variant="error">error</Button>size
---import { Button } from "@/components/starwind/button";import Mail from "@tabler/icons/outline/mail.svg";---
<Button size="sm">small</Button><Button size="md">medium</Button><Button size="lg">large</Button><Button size="icon"><Mail /></Button>radius
Info
With v2.0.0 of this component, it no longer has a radius prop, and instead the classes you pass in will be merged with the component’s default classes using tailwind-variants. This means you can simply pass the class rounded-full or similar.
---import { Button } from "@/components/starwind/button";---
<Button class="rounded-none">btn none</Button><Button class="rounded-xs">btn xs</Button><Button class="rounded-sm">btn sm</Button><Button class="rounded-md">btn md</Button><Button class="rounded-lg">btn lg</Button><Button class="rounded-xl">btn xl</Button><Button class="rounded-full">btn full</Button>API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error" | "default" |
size | "sm" | "md" | "lg" | "icon" | "md" |
The component also accepts all standard HTML attributes for both <button> and <a> elements.
Changelog
v2.0.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts.- Removed
radiusprop now that classes like “rounded-full” can be passed to the components to override, taking advantage oftailwind-variants