---

## Button
Versatile button component with multiple variants, sizes, intents, and micro-interaction patterns.
Built with Svelte 5 and optimized for performance and accessibility.

**Import:** `import { Button } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Button variant="filled" intent="primary" size="md">
  Click me
</Button>
```

```svelte
<Button variant="outlined" intent="danger" mint={['shake', 'ripple']}>
  Delete Item
</Button>
```

```svelte
<!-- Register once at app root: -->
<BlocksProvider
presets={{
Button: {
overlay: {
slotClasses: {
 base: 'bg-black/20 hover:bg-black/30 active:bg-black/40 text-white border-transparent'
}
}
}
}}
>
<Button preset="overlay">Reinholen</Button>
</BlocksProvider>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
- variant: filled, ghost, outlined, text (default: filled)
- size: 2xs, lg, md, sm, xl, xs (default: md)
- active: false, true (default: false)
- buttonGroupConnected: true
- loading: false, true (default: false)
- loadingPlacement: end, overlay, start (default: start)
- pressed: true (default: false)
- tier: commit, modify (default: commit)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...ButtonVariants | `VariantProps` | no |  | Styling variants from ButtonVariants |
| ...HTMLButtonAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| active | `boolean` | no | false | Whether the button is visually active/selected (e.g. in a ButtonGroup with selection). Unlike `pressed` (momentary feedback), `active` represents a persistent selected state. |
| children | `Snippet` | no |  | The content of the button |
| class | `string` | no |  | Custom CSS class name |
| disabled | `boolean` | no | false | Whether the button is disabled |
| loading | `boolean` | no | false | Whether the button is in a loading state |
| loadingPlacement | `'overlay' | 'start' | 'end'` | no | 'overlay' | Where the loading indicator should appear when loading is true - 'overlay': spinner overlays content and hides it (default) - 'start': spinner appears before the content - 'end': spinner appears after the content |
| mint | `MintProp` | no | 'scale' | Micro-interaction patterns Can be a string, array of strings, or array of config objects |
| onclick | `(event: MouseEvent) => void` | no |  | Onclick property for the Button component |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Button: {...} }}>`. Prefer this over `class="bg-…!"` overrides when the requested look is outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| pressed | `boolean` | no | false | Whether the button is pressed (for toggle buttons) |
| slotClasses | `Partial<Record<ButtonSlots, string>>` | no |  | Per-slot class overrides merged with tv styles. Slots: base | content | spinner |
| unstyled | `boolean` | no |  | Remove default tailwind-variants classes. Only user classes apply. |
| value | `string` | no |  | The value associated with the button (useful in ButtonGroups) |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Button. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| variant | `'filled' | 'ghost' | 'outlined' | 'text'` | no | filled | Controls the visual style and presentation of the Button. Determines the component's visual treatment. Available options: filled, ghost, outlined, text. |
| size | `'2xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Button. Affects the component's physical footprint. Available options: 2xs, lg, md, and 3 more. |
| buttonGroupConnected | `'true'` | no |  | Controls the buttonGroupConnected behavior and appearance of the Button component. Available options: true. |
| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the Button component. Available options: commit, modify. |

Inherited from:
- ButtonVariants (external)
- Omit<HTMLButtonAttributes, 'children'> (omit-pattern)