# Button

> An interactive control for a single, immediate action — submitting a form, triggering a command, opening a dialog.

```ts
import { Button } from "@sdxc/ui";
```

Visual state lives in `data-color`/`data-variant`/`data-size` on the host, so
hover, pressed, and focus-visible stay on native pseudo-classes. `type` precedes
the spread so the platform sees it while parsing `command`/`commandfor`.

## Examples

```tsx
<Button type="submit">{t("actions.save")}</Button>
```

```tsx
<Button color="danger" variant="outline" size="sm">{t("actions.delete")}</Button>
```

```tsx
<Button type="submit" isPending={isSubmitting}>{t("actions.save")}</Button>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `variant?` | `"solid" \| "outline" \| "ghost"` | Visual weight. Defaults to DEFAULT_VARIANT. |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_SIZE. |
| `isPending?` | `boolean` | Marks the button busy: merges into the native `disabled` attribute and swaps the visible content for a spinner glyph while holding the rendered footprint, so a page mid-request keeps its layout. |
| `parts?` | `PartsProps` | Per-part styling for the pending state's internal elements. |

Also accepts everything in `TagProps<"button">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |
| `Variant` | `"solid" \| "outline" \| "ghost"` | Visual weight the button renders with: a solid fill with an on-solid foreground, a transparent fill with a strong colored border, or a fully transparent fill with just a colored label. |
| `Size` | `"sm" \| "md" \| "lg"` | Size variant controlling the button's padding and font size. |