# Button

> Bootstrap's button component built with Svelte 5. Use it for actions in forms, dialogs, and more.

Source: https://bootstrap-svelte.vercel.app/components/button — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

```html
<Button>Base button</Button>
```

## Button Color Variants

Bootstrap includes several predefined button styles, each serving its own semantic purpose.

```html
<Button colorVariant="primary">Primary</Button>
<Button colorVariant="secondary">Secondary</Button>
<Button colorVariant="success">Success</Button>
<Button colorVariant="danger">Danger</Button>
<Button colorVariant="warning">Warning</Button>
<Button colorVariant="info">Info</Button>
<Button colorVariant="light">Light</Button>
<Button colorVariant="dark">Dark</Button>
<Button colorVariant="link">Link</Button>
```

## Sizing

Create larger or smaller buttons with the `size` prop.

```html
<Button size="lg" colorVariant="primary">Large Button</Button>
<Button colorVariant="primary">Default Button</Button>
<Button size="sm" colorVariant="primary">Small Button</Button>
```

## Disabled State

Make buttons look inactive by adding the `disabled` prop.

```html
<Button colorVariant="primary" disabled>Primary</Button>
<Button colorVariant="secondary" disabled>Secondary</Button>
<Button colorVariant="success" disabled>Success</Button>
<Button colorVariant="danger" disabled>Danger</Button>
<Button colorVariant="warning" disabled>Warning</Button>
<Button colorVariant="info" disabled>Info</Button>
<Button colorVariant="light" disabled>Light</Button>
<Button colorVariant="dark" disabled>Dark</Button>
<Button colorVariant="link" disabled>Link</Button>
```

## Outline Buttons

Create outline buttons with `colorVariant="outline-*"`. The warning, info, and light examples use docs-only contrast treatment so their text remains readable on a white preview surface.

```html
<Button colorVariant="outline-primary">Primary</Button>
<Button colorVariant="outline-secondary">Secondary</Button>
<Button colorVariant="outline-success">Success</Button>
<Button colorVariant="outline-danger">Danger</Button>
<Button colorVariant="outline-warning">Warning</Button>
<Button colorVariant="outline-info">Info</Button>
<Button colorVariant="outline-light">Light</Button>
<Button colorVariant="outline-dark">Dark</Button>
```

## Using with the Spinner component

Use a Spinner inside a button to indicate loading state. The Spinner will automatically adjust its size based on the button size.

⚠️ Note: This will not work for `<input />` buttons.

```html
<script lang="ts">
    let isSubmitting: boolean = $state(false);
</script>
<Button colorVariant="primary" type="submit" disabled={isSubmitting} onclick={() => (isSubmitting = true)}>
    {#if isSubmitting}
        <Spinner size="sm"><span class="visually-hidden">Subscribing...</span></Spinner>
        Submitting...
    {:else}
        Submit
    {/if}
</Button>
{#if isSubmitting}
    <Button colorVariant="outline-secondary" type="reset" onclick={() => (isSubmitting = false)}>Reset</Button>
{/if}
```

## Accessibility

- Use clear action text; avoid icon-only buttons unless you provide an accessible label.
- Set `type="button"`, `type="submit"`, or `type="reset"` intentionally when buttons live inside forms.
- Check contrast when using Bootstrap outline warning, info, and light variants on light backgrounds.
- For loading states, keep the button text meaningful and include visually hidden text for spinner-only indicators.

## API Reference

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `disabled` | `boolean` | `false` | Makes the button appear inactive and prevents interactions |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `href` | `string` | — | If specified, button will be rendered as an anchor tag |
| `id` | `string` | — | Unique identifier for the button. If not specified, it will be auto-generated. |
| `size` | `string` | — | Sets the button size. Values: 'sm', 'lg' |
| `type` | `string` | `'button'` | Button type attribute ('button', 'submit', 'reset') |
| `value` | `string` | — | If specified, button will be rendered as input element |
| `colorVariant` | `string` | — | Sets the button's appearance. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'link', 'outline-primary', 'outline-secondary', etc. |

### CSS Classes

The component applies Bootstrap's button classes based on the provided props:

- `btn` - Always applied as the base class
- `btn-{variant}` - Applied based on the variant prop
- `btn-{size}` - Applied based on the size prop
- `disabled` - Applied for anchor buttons when disabled