Silicon Silicon UI Kit
 Buy now

Toasts

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

Bootstrap docs

Basic example

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

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