Toast

How it works

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Basic example

Hello, world! This is a toast message.

<x-toast class="fade show">
    <x-toast.body>Hello, world! This is a toast message.</x-toast.body>
</x-toast>

<x-toast class="fade show mt-4" title="A basic example">
    <x-toast.body>Hello, world! This is a toast message.</x-toast.body>
</x-toast>

<x-toast class="fade show mt-4" title="Custom icon example" icon="question-circle-fill">
    <x-toast.body>Hello, world! This is a toast message.</x-toast.body>
</x-toast>

<x-toast class="fade show mt-4" title="With subtitle" icon="app-indicator" subtitle="7 mins ago">
    <x-toast.body>Hello, world! This is a toast message.</x-toast.body>
</x-toast>

<x-toast class="fade show mt-4" title="Without icon" :icon="false" subtitle="7 mins ago">
    <x-toast.body>Hello, world! This is a toast message.</x-toast.body>
</x-toast>

<div class="toast fade show"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<div class="toast fade show mt-4"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">A basic example</strong>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<div class="toast fade show mt-4"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Custom icon example</strong>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<div class="toast fade show mt-4"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">With subtitle</strong> <small>7 mins ago</small>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<div class="toast fade show mt-4"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Without icon</strong> <small>7 mins ago</small>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Using slot example

Hello, world! This is a toast message.

<x-toast class="fade show">
    <x-slot name="header">
        <x-icon name="heart-fill" class="me-2 text-danger"/>
        <strong class="me-auto">I love toast</strong>
        <small>11 mins ago</small>
    </x-slot>

    <x-slot name="body">
        Hello, world! This is a toast message.
    </x-slot>
</x-toast>

<div class="toast fade show"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">I love toast</strong> <small>11 mins ago</small>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Using component example

Hello, world! This is a toast message.

<x-toast class="fade show">
    <x-toast.header>
        <x-icon name="alarm" class="me-2 text-warning"/>
        <strong class="me-auto">Toast header component</strong>
        <small>11 mins ago</small>
    </x-toast.header>

    <x-toast.body>
        Hello, world! This is a toast message.
    </x-toast.body>
</x-toast>

<div class="toast fade show"
     role="alert"
     aria-live="assertive"
     aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast header component</strong> <small>11 mins ago</small>
  </div>

  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>