Toast

import { Button, toast } from '@kition/tessera-ui'

// Render <Toaster /> once near the root of the editor; toast() can then be called from anywhere.
export default function Demo() {
  return (
    <div className="demo-row">
      <Button onClick={() => toast('success', 'Saved', 'Budget 2027.xlsx')}>Success</Button>
      <Button onClick={() => toast('info', 'Agent is working', 'Rewriting slide 3')}>Info</Button>
      <Button onClick={() => toast('error', 'Could not save', 'The disk is full')}>Error</Button>
    </div>
  )
}

import { Button, toast } from '@kition/tessera-ui'

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

export default function Demo() {
  return (
    <div className="demo-row">
      <Button onClick={() => toast.info('Row deleted', { action: { label: 'Undo', onClick: () => toast.success('Row restored') } })}>With an action</Button>
      <Button onClick={() => void toast.promise(wait(1500).then(() => 3), { loading: 'Exporting…', success: (count) => `Exported ${count} files`, error: 'Export failed' })}>A promise</Button>
      <Button onClick={() => toast.error('Offline', { id: 'network', duration: Number.POSITIVE_INFINITY, description: 'Changes are kept until you reconnect.' })}>Sticky</Button>
      <Button variant="ghost" onClick={() => toast.dismiss()}>Dismiss all</Button>
    </div>
  )
}