# Button

A button or a component that looks like a button.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Button } from "coss-svelte";
</script>

<Button>Button</Button>

```

## Anatomy

- `Button`

## API Reference

### Button

A button or a component that looks like a button.

**Signatures**

- `{ href: string; type?: undefined; target?: HTMLAttributeAnchorTarget \| null; download?: any; form?: undefined; disabled?: undefined }`
- `{ href?: undefined; type?: "submit" \| "reset" \| "button" \| null; target?: undefined; download?: undefined; form?: string \| null; disabled?: boolean \| null }`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"link" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "destructive-outline" \| "default"` | `"default"` | Visual variant for the component. |
| `size` | `"default" \| "md" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| "icon-xl"` | `"default"` | Size variant for the component. |
| `href` | `string` | `""` | Renders the component as a link target when provided. |
| `type` | `"submit" \| "reset" \| "button" \| null` | `"button"` | Behavior, selection, or HTML type passed to the underlying control. |
| `loading` | `boolean` | `false` | Shows the loading indicator and disables the button. |
| `disabled` | `boolean \| null` | `false` | Disables interaction with the control. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <a> / <button> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Actions |
| Particles | 40 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/button.json` for the complete local file and dependency closure.
- Button is stable in the current source catalog.