Toast

import { Button, toast } from '@bindshq/stance-react';

export function Basic() {
  return <Button onClick={() => toast('Signature copied to clipboard')}>Show toast</Button>;
}

import { Button, toast } from '@bindshq/stance-react';

export function Tones() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Button
        variant="outline"
        onClick={() => toast.success('Template published', { description: 'Live for 32 people.' })}
      >
        Success
      </Button>
      <Button variant="outline" onClick={() => toast.info('Sync scheduled for 02:00')}>
        Info
      </Button>
      <Button variant="outline" onClick={() => toast.warning('Azure token expires in 3 days')}>
        Warning
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.error('Could not reach Exchange', { description: 'Check your relay settings.' })
        }
      >
        Error
      </Button>
    </div>
  );
}

import { Button, toast } from '@bindshq/stance-react';

export function WithAction() {
  return (
    <Button
      variant="danger"
      onClick={() =>
        toast('Ada Lovelace removed', {
          description: 'Their signature will be unassigned.',
          action: { label: 'Undo', onClick: () => toast.success('Ada Lovelace restored') },
        })
      }
    >
      Remove user
    </Button>
  );
}

import { Button, toast } from '@bindshq/stance-react';

export function PromiseToast() {
  return (
    <Button
      onClick={() =>
        toast.promise(new Promise<number>((resolve) => setTimeout(() => resolve(120), 1500)), {
          loading: 'Importing users from CSV…',
          success: (count) => `${count} users imported`,
          error: 'Import failed',
        })
      }
    >
      Import users
    </Button>
  );
}