Toast

provides brief notifications. The component is also known as Snackbar.

Note: I have set the root font-size to 10px for this library.

Instructions to import the Toast component in your CSS or HTML:

// CSS
@import url("https://starlingui.netlify.app/utils/color.css");
@import url("https://starlingui.netlify.app/pages/components/button/button.css");
@import url("https://starlingui.netlify.app/pages/components/toast/toast.css");

// HTML
<link rel="stylesheet" href="https://starlingui.netlify.app/utils/color.css">
<link rel="stylesheet" href="https://starlingui.netlify.app/pages/components/button/button.css">
<link rel="stylesheet" href="https://starlingui.netlify.app/pages/components/toast/toast.css">

Simple Toast

has 4 different colors. Click on the buttons below for demo:

informative Toast with close button

danger Toast with a close button

success Toast with a close button

warning Toast with a close button

<!-- Standard Toast -->
<div class="sui_toast sui_toast_info">
  <i class="fas fa-info-circle"></i>
  informative Toast with close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>
<!-- Danger Toast -->
<div class="sui_toast sui_toast_danger">
  <i class="fas fa-exclamation-triangle"></i>
  danger Toast with a close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>
<!-- Success Toast -->
<div class="sui_toast sui_toast_success">
  <i class="fas fa-check-circle"></i>
  success Toast with a close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>
<!-- Warning Toast -->
<div class="sui_toast sui_toast_warning">
  <i class="fas fa-exclamation-circle"></i>
  warning Toast with a close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>