Toast

Fixed-position notification with auto-dismiss, slide-in animation, and 4 severity variants.

Basic

import { useState } from 'react'
import { Toast, Button } from '@canarist/ui'

function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Toast</Button>
      <Toast
        variant="success"
        title="Saved successfully"
        description="Your changes have been saved."
        open={open}
        onClose={() => setOpen(false)}
      />
    </>
  )
}

Variants

<Toast variant="success" title="Changes saved" open={open} onClose={onClose} />
<Toast variant="error" title="Something went wrong" open={open} onClose={onClose} />
<Toast variant="warning" title="Quota nearly full" open={open} onClose={onClose} />
<Toast variant="info" title="New alerts available" open={open} onClose={onClose} />

Reference

Prop	Type	Default	Description
open	boolean	—	Whether the toast is shown.
onClose	() => void	—	Called after the dismiss animation completes.
variant	'success' \| 'error' \| 'warning' \| 'info'	'info'	Semantic variant controlling icon and border color.
title	string	—	Primary message text.
description	string	—	Secondary detail text.
action	{ label: string; onClick: () => void }	—	Optional inline action button.
duration	number	5000	Auto-dismiss delay in ms. Set to 0 to disable.