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><Button size="icon-sm"><Mail /></Button><Button size="icon-lg"><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
Button
A versatile button component with multiple variants and sizes.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "secondary" | "outline" | "ghost" | "info" | "success" | "warning" | "error" | "default" |
size | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | "md" |
href | string | - |
class | string | - |
<Button variant="default" size="md">Button</Button>Additional Notes:
size: Determines the button size. Use"icon","icon-sm", or"icon-lg"for icon-only buttonshref: When provided, renders the button as a link (<a>tag) instead of a<button>
Changelog
v2.2.0
- add additional sizes “icon-sm” and “icon-lg”
- style and focus state updates
v2.1.0
- Add a
data-slotattribute to all components to enable global styling updates
v2.0.1
- Adjust component to use type
VariantPropsfromtailwind-variants. This provides greater type safety and cleans up component frontmatter.
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