Toast

VISPA-UI includes an expertly-crafted 6 varities of Toast components which can make your UI building experience effortless.

Basic Toast

To use the Basic Toast component give the toast class to the toast container.

This is a basic Toast

              
              
<div class="toast toast__basic">
  <p class="toast__content">This is a basic Toast</p>
</div>

Stacked Toast

To use the Stacked Toast component give the toast__stacked class to the toast container.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae natus molestiae maxime veritatis libero harum quo.

Action Button 1 Action Button 2

              
              
<div class="toast toast__stacked tst--primary">
  <p class="toast__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Beatae natus molestiae maxime veritatis libero harum quo.
  </p>
  <div class="toast__button--wrapper">
    <a class="button btn-plain btn-sm btn-primary">Action Button 1</a>
    <a class="button btn-plain btn-sm btn-primary">Action Button 2</a>
  </div>
</div>

Primary Toast

To use the Primary Toast component give the tst--primary class to the toast container.

This is a Primary Toast

              
              
<div class="toast tst--primary">
  <img
    class="icon-lg toast__icon"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/info.svg"
  >
  <p class="toast__content">This is a Primary Toast</p>
  <img 
    class="icon-md toast__icon--btn toast__close icon-primary"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
  >
</div>

Danger Toast

To use the Danger Toast component give the tst--danger class to the toast container.

This is a Danger Toast

              
              
<div class="toast tst--danger">
  <img 
    class="icon-lg toast__icon"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/ban.svg"
  >
  <p class="toast__content">This is a Danger Toast</p>
  <img
    class="icon-md toast__icon--btn toast__close icon-danger"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/redo.svg"
  >
  <img
    class="icon-md toast__icon--btn toast__close icon-danger"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
  >
</div>

Success Toast

To use the Success Toast component give the tst--success class to the toast container.

This is a Success Toast

              
              
<div class="toast tst--success">
  <img 
    class="icon-lg toast__icon"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/check.svg"
  >
  <p class="toast__content">This is a Success Toast</p>
  <img 
    class="icon-md toast__icon--btn toast__close icon-success"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
  >
</div>

Warning Toast

To use the Warning Toast component give the tst--warning class to the toast container.

This is a Warning Toast

              
              
<div class="toast tst--warning">
  <img 
    class="icon-lg toast__icon"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/warning.svg"
  >
  <p class="toast__content">This is a Warning Toast</p>
  <img
    class="icon-md toast__icon--btn toast__close icon-warning"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/redo.svg"
  >
  <img 
    class="icon-md toast__icon--btn toast__close icon-warning"
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
  >
</div>