Toast

A toast message is short message to send some information to user. It is timed and disappears in few seconds. Toast is normally fixed on viewport so they don't form part of normal data flow.

Simply add toast class to a container and it becomes a toast message. Pass position attribute to set the position of the toast message. User can set the content as per their needs.

Position: top-left | top-right | bottom-left | bottom-right. Add dark--toast class to use toast in dark mode.

Use toast__open to controle the dynamic behaviour.

<div class="toast sm-s " position='bottom-left'>
      <span class="content md">This is a Toast message. Good Morning..!!</span>
</div>