Toast

The Toast component provides you with popup notifications.

Live Examples

Storybook: components-toast--default

Storybook: components-toast--success

Storybook: components-toast--with-action

Examples

import { Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@nostromo/ui-core'
 
export default function ToastExample() {
  return (
    <ToastProvider>
      <Toast>
        <ToastTitle>Success!</ToastTitle>
        <ToastDescription>Your action was completed.</ToastDescription>
        <ToastAction altText="Undo">Undo</ToastAction>
      </Toast>
      <ToastViewport />
    </ToastProvider>
  )
}

Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	Toast variant
`duration`	`number`	`5000`	Toast duration in ms

Alert Tooltip