Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Toasts

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

Bootstrap docs

## Basic example

###### Silicon

11 mins ago
Hello, world! This is a toast message.

    <!-- Basic toast example (remove show class to hide toast initially) -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header">
        <div class="d-inline-block align-middle bg-primary rounded-1 me-2" style="width: 1.25rem; height: 1.25rem;"></div>
        <h6 class="fs-sm mb-0 me-auto">Silicon</h6>
        <small class="fw-bold text-muted">11 mins ago</small>
        <button type="button" class="btn-close ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>

## Color variations

Primary toast
Hello, world! This is a toast message.
Secondary toast
Hello, world! This is a toast message.
Success toast
Hello, world! This is a toast message.
Danger toast
Hello, world! This is a toast message.
Warning toast
Hello, world! This is a toast message.
Info toast
Hello, world! This is a toast message.
Dark toast
Hello, world! This is a toast message.
Custom color toast
Hello, world! This is a toast message.

    <!-- Remove class show from toast to hide it initially. Remove data-bs-autohide="false" to enable autohide behavior. -->

    <!-- Primary toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-primary text-white">
        <i class="bx bx-bell fs-lg me-2"></i>
        <span class="me-auto">Primary toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-primary">Hello, world! This is a toast message.</div>
    </div>

    <!-- Secondary toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-secondary">
        <i class="bx bx-time fs-lg me-2"></i>
        <span class="me-auto">Secondary toast</span>
        <button class="btn-close ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>

    <!-- Success toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-success text-white">
        <i class="bx bx-check-circle fs-lg me-2"></i>
        <span class="me-auto">Success toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-success">Hello, world! This is a toast message.</div>
    </div>

    <!-- Danger toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-danger text-white">
        <i class="bx bx-block fs-lg me-2"></i>
        <span class="me-auto">Danger toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-danger">Hello, world! This is a toast message.</div>
    </div>

    <!-- Warning toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-warning text-white">
        <i class="bx bx-error fs-lg me-2"></i>
        <span class="me-auto">Warning toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-warning">Hello, world! This is a toast message.</div>
    </div>

    <!-- Info toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-info text-white">
        <i class="bx bx-info-circle fs-lg me-2"></i>
        <span class="me-auto">Info toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-info">Hello, world! This is a toast message.</div>
    </div>

    <!-- Dark toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header bg-dark text-white">
        <i class="bx bx-x-circle fs-lg me-2"></i>
        <span class="me-auto">Dark toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body text-dark">Hello, world! This is a toast message.</div>
    </div>

    <!-- Custom color toast -->
    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
      <div class="toast-header border-0 text-white" style="background-color: #69459e;">
        <i class="bx bx-lock fs-lg me-2"></i>
        <span class="me-auto">Custom color toast</span>
        <button class="btn-close btn-close-white ms-2 mb-1" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body" style="color: #69459e;">Hello, world! This is a toast message.</div>
    </div>

Top