# Toasts

> Push notifications to your visitors with a toast, a lightweight and easily customizable alert message using Svelte components.

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

---

## Basic Example

Toasts are opt-in for performance reasons, so you must activate them yourself.

```html
<Button id="liveToastBtn" colorVariant="primary" onclick={() => isToastShown = true}>
    Show live toast
</Button>

<Toast.Container isFixed placement="bottom-end">
    <Toast.Root isShown={isBasicToastShown} doAutohide={true} delay={5000}>
        <Toast.Header>
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
    </Toast.Root>
</Toast.Container>
```

## Stacking

You can stack multiple toasts by wrapping them in a toast container.

```html
<Toast.Container position="bottom-end">
    <Toast.Root isShown={true}>
        <Toast.Header>
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-body-secondary">just now</small>
        </Toast.Header>
        <Toast.Body>See? Just like this.</Toast.Body>
    </Toast.Root>

    <Toast.Root isShown={true}>
        <Toast.Header>
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-body-secondary">2 seconds ago</small>
        </Toast.Header>
        <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
    </Toast.Root>
</Toast.Container>
```

## Auto-hide behavior

Toasts will automatically hide if you do not specify `doAutohide=false`. You can also customize the delay.

###### Auto-hide disabled:

**Bootstrap** 11 mins ago

This toast won't auto-hide

###### Custom delay (10 seconds):

##### Disable auto-hide

```html
<Toast.Root doAutohide={false}>
    <Toast.Header>
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
    </Toast.Header>
    <Toast.Body>This toast won't auto-hide</Toast.Body>
</Toast.Root>
```

##### Custom delay

```html
<Toast.Root delay={10000}>
    <Toast.Header>
        <strong class="me-auto">Bootstrap</strong>
        <small>just now</small>
    </Toast.Header>
    <Toast.Body>This toast will hide after 10 seconds</Toast.Body>
</Toast.Root>
```

## Custom Content

Customize your toasts by removing sub-components, tweaking them with utilities, or adding your own markup.

```html
<!-- Simple, no header example -->
<Toast.Root isShown={isCustomContent1Shown}>
    <div class="d-flex">
        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
        <CloseButton class="me-2 m-auto" onclick={() => (isCustomContent1Shown = false)} />
    </div>
</Toast.Root>

<!-- With action buttons -->
<Toast.Root isShown={isCustomContent2Shown}>
    <Toast.Body>
        Hello, world! This is a toast message.
        <div class="mt-2 pt-2 border-top">
            <Button colorVariant="primary" size="sm">Take action</Button>
            <Button colorVariant="secondary" size="sm" class="ms-2" onclick={() => (isCustomContent2Shown = false)}>Close</Button>
        </div>
    </Toast.Body>
</Toast.Root>
```

## Color Schemes

You can create different toast color schemes with our color and background utilities.

```html
<Toast.Root isShown={isColorScheme1Shown} class="text-bg-primary border-0">
    <div class="d-flex">
        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
        <CloseButton class="btn-close-white me-2 m-auto" onclick={() => (isColorScheme1Shown = false)} />
    </div>
</Toast.Root>

<Toast.Root isShown={isColorScheme2Shown} class="text-bg-success border-0">
    <div class="d-flex">
        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
        <CloseButton class="btn-close-white me-2 m-auto" onclick={() => (isColorScheme2Shown = false)} />
    </div>
</Toast.Root>
```

## No Fade Effect

You can disable the fade transition for toasts.

```html
<Toast.Root isShown={true} useFade={false}>
    <Toast.Header>
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
    </Toast.Header>
    <Toast.Body>This toast appears without fade transition</Toast.Body>
</Toast.Root>
```

## Placement

Place toasts with the `Toast.Container` component using the `position` prop. The `position` prop accepts: `top-start`, `top-center`, `top-end`, `middle-start`, `middle-center`, `middle-end`, `bottom-start`, `bottom-center`, or `bottom-end`.

**Top Left**

top-start

**Top Center**

top-center

**Top Right**

top-end

**Middle Left**

middle-start

**Middle Center**

middle-center

**Middle Right**

middle-end

**Bottom Left**

bottom-start

**Bottom Center**

bottom-center

**Bottom Right**

bottom-end

```html
<!-- Top left -->
<Toast.Container position="top-start">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Top center -->
<Toast.Container position="top-center">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Top right -->
<Toast.Container position="top-end">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Middle left -->
<Toast.Container position="middle-start">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Middle center -->
<Toast.Container position="middle-center">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Middle right -->
<Toast.Container position="middle-end">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Bottom left -->
<Toast.Container position="bottom-start">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Bottom center -->
<Toast.Container position="bottom-center">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>

<!-- Bottom right -->
<Toast.Container position="bottom-end">
    <Toast.Root isShown={true}>...</Toast.Root>
</Toast.Container>
```

## Accessibility

Toasts are status messages, not modal dialogs. Render the toast container before updating the toast content so assistive technologies can detect the change in a live region.

Match the announcement priority to the content:

- Use `role="status"` with `aria-live="polite"` for routine confirmations and background updates.
- Use `role="alert"` with `aria-live="assertive"` only for urgent messages that need immediate attention.
- Keep `aria-atomic="true"` so the whole toast is announced as one message.

**Timing:** Avoid auto-hiding important, interactive, or lengthy messages. When a toast does auto-hide, give users enough time to read it, pause the timer while the toast is hovered or focused, and provide a visible dismiss control for persistent messages.

Do not move focus to a toast just because it appears. Keep keyboard focus where the user is working unless the toast contains an action that the user explicitly opened or must complete. If a toast includes buttons or links, make sure it remains visible while focus is inside it and can be dismissed without requiring pointer input.

## API Reference

### Toast.Root Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `Snippet` | `undefined` | Content to display inside the toast |
| `delay` | `number` | `5000` | Delay in milliseconds before hiding the toast |
| `doAutohide` | `boolean` | `true` | Whether the toast should automatically hide after the delay |
| `elementRef` | `HTMLElement` | `null` | Reference to the toast DOM element |
| `id` | `string` | `toast-[uid]` | ID for the toast element |
| `isShown` | `boolean` | `false` | Controls whether the toast is visible |
| `onHide` | `Function` | `noop` | Function called when the toast starts hiding |
| `onHidden` | `Function` | `noop` | Function called after the toast is fully hidden |
| `onShow` | `Function` | `noop` | Function called when the toast starts showing |
| `onShown` | `Function` | `noop` | Function called after the toast is fully shown |
| `useFade` | `boolean` | `true` | Whether the toast should use a fade transition |

### Toast.Header Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `Snippet` | `undefined` | Content to display inside the header |
| `elementRef` | `HTMLElement` | `null` | Reference to the header DOM element |
| `id` | `string` | `toast-header-[uid]` | ID for the header element |
| `isDismissible` | `boolean` | `true` | Whether to show a close button |

### Toast.Body Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `Snippet` | `undefined` | Content to display inside the body |
| `elementRef` | `HTMLElement` | `null` | Reference to the body DOM element |
| `id` | `string` | `toast-body-[uid]` | ID for the body element |

### Toast.Container Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `Snippet` | `undefined` | Toast components to display inside the container |
| `elementRef` | `HTMLElement` | `null` | Reference to the container DOM element |
| `id` | `string` | `toast-container-[uid]` | ID for the container element |
| `position` | `string` | `'bottom-end'` | Position of the container in the viewport. Options include: 'top-start', 'top-center', 'top-end', 'middle-start', 'middle-center', 'middle-end', 'bottom-start', 'bottom-center', 'bottom-end' |

### CSS Classes

| Class | Description |
| --- | --- |
| `.toast` | Main container class for the toast |
| `.toast-header` | Styles the header section of the toast |
| `.toast-body` | Styles the body section of the toast |
| `.toast-container` | Used to position and stack multiple toasts |
| `.fade` | Applied to enable the fade transition effect |
| `.show` | Applied when the toast is visible |
| `.text-bg-*` | Color scheme classes (e.g., .text-bg-primary, .text-bg-success) for toast variants |