Alert

import { Alert } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Alert title="Signatures update overnight">
      Changes you publish today reach every mailbox after the 02:00 sync.
    </Alert>
  );
}

import { Alert } from '@bindshq/stance-react';

export function Tones() {
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <Alert tone="info" title="Directory sync is on">
        New starters receive the default signature automatically.
      </Alert>
      <Alert tone="success" title="Exchange connected">
        Signatures will deploy through your relay.
      </Alert>
      <Alert tone="warning" title="48 of 50 seats used">
        Add seats before inviting more people.
      </Alert>
      <Alert tone="danger" title="Deployment failed">
        Exchange rejected the connection. Check your relay credentials.
      </Alert>
    </div>
  );
}

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

export function WithActions() {
  return (
    <Alert
      tone="warning"
      title="Azure connection expires in 3 days"
      actions={
        <>
          <Button size="sm">Reconnect</Button>
          <Button size="sm" variant="ghost">
            Remind me later
          </Button>
        </>
      }
    >
      Signatures stop deploying when the token expires.
    </Alert>
  );
}

import * as React from 'react';
import { Alert, Button } from '@bindshq/stance-react';

export function Dismissible() {
  const [open, setOpen] = React.useState(true);
  return open ? (
    <Alert tone="success" title="Import complete" onDismiss={() => setOpen(false)}>
      120 users were added to your organisation.
    </Alert>
  ) : (
    <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
      Show again
    </Button>
  );
}