On this page

Button

---
import { Button } from "@/components/starwind/button";
---

<Button>Button</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <Button>Button</Button>
  );
}

Installation

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

Framework Availability

Astro Available React Available

Button is available for Astro and React.

Link

The Button component can also function as a link (<a> tag) by providing an href prop.

Button

---
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

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Button

Inherits a attributes. Omits `type`.

Inherits button attributes.

Contains the following additional props:

Prop Type Default

as "button" | "a" —

Description: Selects the rendered element or component.
Classification: Wrapper prop

focusableWhenDisabled boolean —

Description: Keeps the disabled control in the keyboard focus order.
Classification: Primitive override
Primitive prop: button.Root.focusableWhenDisabled

Description: Selects the component's visual size.
Classification: Styled variant

Description: Selects the component's visual variant.
Classification: Styled variant

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Button.

Primitive API

Button Primitive

Runtime API

Button primitive: createButton from @starwind-ui/runtime/button

Changelog

v3.0.0

Rebuilt Button on Starwind Runtime while preserving styled variants and link rendering.
See the Button Primitive for the underlying unstyled anatomy and behavior API.

v2.3.3

Refactor tailwind variants functions into separate variants.ts file

v2.3.0

Add aria-invalid styling
Update styling for SVGs within so it doesn’t override any size-* classes on the SVG itself
Update style horizontal padding to more closely match shadcn aspect ratios

v2.2.0

add additional sizes “icon-sm” and “icon-lg”
style and focus state updates

v2.1.0

Add a data-slot attribute to all components to enable global styling updates

v2.0.1

Adjust component to use type VariantProps from tailwind-variants. This provides greater type safety and cleans up component frontmatter.

v2.0.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts.
Removed radius prop now that classes like “rounded-full” can be passed to the components to override, taking advantage of tailwind-variants