Toasts

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

Toast Playground

Use the controls below to configure and display a toast notification.

Configuration

Toast will appear here when triggered

Code

            
            <Toast.Container placement="bottom-end">
    <Toast.Root isShown={true}>
        <Toast.Header>
            <strong class="me-auto">Bootstrap Toast</strong>
            <small>just now</small>
        </Toast.Header>
        <Toast.Body>
            Hello, world! This is a toast message.
        </Toast.Body>
    </Toast.Root>
</Toast.Container>

Content

Header text

Sub text (e.g. timestamp)

Toast body text

Behavior

Auto-hide toast

Delay (ms): 5000

Position

Use fade effect

Show dismiss button in header

Enable event tracking

Basic Example

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

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

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

This toast won't auto-hide

Custom delay (10 seconds):

Disable auto-hide

            
            <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

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

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

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

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

top-center

top-end

middle-start

middle-center

middle-end

bottom-start

bottom-center

bottom-end

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