# 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>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Button</Button>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add button --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add button --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add button --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

Button renders a `<button>` by default. Provide `href` when the action should navigate to another
page.

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

<Button>Save</Button>
<Button href="#api-reference" variant="outline">View API</Button>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button>Save</Button>
      <Button href="#api-reference" variant="outline">View API</Button>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Save</Button>
  <Button href="#api-reference" variant="outline">View API</Button>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Variants

Use `variant` to set the action's visual emphasis and status.

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <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>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Sizes

Use `size` for text buttons and the `icon-*` sizes for icon-only buttons. Give every icon-only
button an accessible name.

<FrameworkCodeSwitcher>
  <div slot="astro">
```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" aria-label="Open messages"><Mail /></Button>
<Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
<Button size="icon-lg" aria-label="Open messages"><Mail /></Button>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";
import { IconMail as Mail } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
      <Button size="icon" aria-label="Open messages"><Mail /></Button>
      <Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
      <Button size="icon-lg" aria-label="Open messages"><Mail /></Button>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
import { IconMail as Mail } from "@tabler/icons-vue";
</script>

<template>
  <Button size="sm">small</Button>
  <Button size="md">medium</Button>
  <Button size="lg">large</Button>
  <Button size="icon" aria-label="Open messages"><Mail /></Button>
  <Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
  <Button size="icon-lg" aria-label="Open messages"><Mail /></Button>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Border Radius

Use a Tailwind radius class such as `rounded-none` or `rounded-full` to override the default
corners.

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button className="rounded-none">btn none</Button>
      <Button className="rounded-xs">btn xs</Button>
      <Button className="rounded-sm">btn sm</Button>
      <Button className="rounded-md">btn md</Button>
      <Button className="rounded-lg">btn lg</Button>
      <Button className="rounded-xl">btn xl</Button>
      <Button className="rounded-full">btn full</Button>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 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.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

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