# Button

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Button } from "@/components/starwind/button";
---

<Button>Button</Button>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";

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

## Installation

```bash
npx starwind@latest add button
```

## Link

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

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

<Button href="#link">Button</Button>
```

## Usage

### variant

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

```astro
---
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.

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

## Framework Availability
Button is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Button
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `as` | `"button" \| "a"` | No | - | Wrapper prop | Selects the rendered element or component. |
| `focusableWhenDisabled` | `boolean` | No | - | Primitive override | Keeps the disabled control in the keyboard focus order. |
| `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"` | No | `"md"` | Styled variant | Selects the component's visual size. |
| `variant` | `"default" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "info" \| "success" \| "warning" \| "error"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits a attributes. Omits `type`.
- Inherits button attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Button Primitive](/docs/primitives/button/)
- Runtime factory: [`createButton`](/docs/runtime/#create-button) 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](/docs/primitives/button/) 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`