Toast banner

• A toast banner message of 5 types: success, info, warn, danger, and neutral.

import { ToastBanner } from '@viamrobotics/prime-core';

Success

Saved configuration

<ToastBanner
  variant={ToastVariant.Success}
  message="Saved configuration"
  dismiss={() => {
    console.log('Clicked close button');
  }}
/>

Info

Saved configuration

<ToastBanner
  variant={ToastVariant.Info}
  message="Saved configuration"
  dismiss={() => {
    console.log('Clicked close button');
  }}
/>

Danger

Saved configuration

<ToastBanner
  variant={ToastVariant.Danger}
  message="Saved configuration"
  dismiss={() => {
    console.log('Clicked close button');
  }}
/>

Warning

Saved configuration

<ToastBanner
  variant={ToastVariant.Warning}
  message="Saved configuration"
  dismiss={() => {
    console.log('Clicked close button');
  }}
/>

Neutral

Saved configuration

<ToastBanner
  variant={ToastVariant.Neutral}
  message="Saved configuration"
  dismiss={() => {
    console.log('Clicked close button');
  }}
/>

Optional action

Deleted "my-arm"

Undo

<ToastBanner
  message={`Deleted "my-arm"`}
  variant={ToastVariant.Success}
  dismiss={() => {
    console.log('Clicked close button');
  }}
  action={{
    text: 'Undo',
    handler: () => {
      console.log('Clicked action');
    }
  }}
  cx="max-w-[280px]"
/>