Button

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

Playground

Experiment with the Button component by adjusting the props below:

Interactive Playground

Controls

Text

Color Variant

Size

Button Type

Button

Link

Input

Disabled

Track Click Events

Preview

Code

            
            <Button
  colorVariant="primary"
  onclick={handleClick}>Button Text</Button>

Click Events

Click count: 0

Basic Example

            
            <Button>Base button</Button>

Button Color Variants

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

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

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

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

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

            
            <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