Toast 🍞
BASIC TOAST
This is a toast's sample content. You should keep it short, precise and to-the-point.
Default
This is a toast's sample content. You should keep it short, precise and to-the-point.
Info
This is a toast's sample content. You should keep it short, precise and to-the-point.
Success
This is a toast's sample content. You should keep it short, precise and to-the-point.
Warning
This is a toast's sample content. You should keep it short, precise and to-the-point.
Danger
<div class="toast-wrapper">
<!-- Default Toast -->
<div class="toast">...</div>
<!-- Info Toast -->
<div class="toast -info">...</div>
<!-- Success Toast -->
<div class="toast -success">...</div>
<!-- Warning Toast -->
<div class="toast -warning">...</div>
<!-- Danger Toast -->
<div class="toast -danger">...</div>
</div>
Notice:
- Always wrap toast in
.toast-wrapper - Messages inside a toast should be short, precise and to-the-point.
- The content should not exceed 140 characters, so choose your words carefully.
- Use basic toast with class
.toast - Add classes
.-info.-success.-warning.-dangerto use other variants. - Toasts have fixed width.
DISMISSIBLE TOAST
Toasts could be dismissible. Simply add a closing button as a mechanism to enable that functionality.
I am a dismissible toast. Close me by clicking the button on the right.
I am a dismissible toast. Close me by clicking the button on the right.
I am a dismissible toast. Close me by clicking the button on the right.
I am a dismissible toast. Close me by clicking the button on the right.
I am a dismissible toast. Close me by clicking the button on the right.
<div class="toast-wrapper">
<div class="toast">
<span><!-- Toast content --></span>
<button class="btn -plain" aria-label="close">
<svg class="icon-svg">
<use xlink:href="../assets/super-tight-icon-set/dist/stis-master.svg#icon-cross"></use>
</svg>
</button>
</div>
</div>
Notice:
- By default, a toast is not visible. When a toast is called, class
.openwill be added to display it. aria-label="close"is to improve accessiblity for people using screen readers. Please consider including it when creating a close button.
LIVE DEMO
Related mixin
@mixin toast-generator($background-color, $border-color, $text-color) {
@include info-box($background-color, $border-color, $text-color);
> .btn:hover {
background-color: $border-color;
}
}
Notice:
Take a look at the Mixin Page for more information about info-box mixin.
Example
Usage:
.element {
@include toast-generator($warning-color-light-100, $warning-color-light-80, $warning-color-dark-20);
}
CSS Output:
.element {
background-color: #f6eedf;
border: 1px solid #eddebf;
border-radius: 3px;
color: #af8531;
}
.element > .btn:hover {
background-color: #eddebf;
}