package.docs.components.toasts.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
title: Toasts
description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
bootstrapLink: components/toasts/
---

## Default markup

Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.

```html example code

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

```

## Translucent

Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.

```html example code

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

```

## Stacking toasts

Stack multiple toasts together by putting them within one `.toast-container`.

```html example code height="260px"

  
    
      
      Dunn Slane
      11 mins ago
      
    
    
      Hello, world! This is a toast message.
    
  
  
    
      
      Mallory Hulme
      7 mins ago
      
    
    
      This is another toast message.
    
  

```