Notice

import { InfoIcon, WarningIcon } from '@phosphor-icons/react';
import { Notice } from '@arbol-ai/ui';

<div className="max-w-xl space-y-2">
  <Notice tone="neutral">This agent has no tools from this system yet.</Notice>
  <Notice icon={<InfoIcon aria-hidden />}>Only administrators change these settings.</Notice>
  <Notice tone="success">Template saved. Agents use it from the next call.</Notice>
  <Notice icon={<WarningIcon aria-hidden />} title="Two agents share this number" tone="warning">
    Calls go to whichever answers first.
  </Notice>
  <Notice alert={false} tone="error">
    This WhatsApp number is disconnected.
  </Notice>
</div>

import { useState } from 'react';
import { Button, Notice } from '@arbol-ai/ui';

const DismissExample = () => {
  const [isShown, setIsShown] = useState(true);
  if (!isShown) {
    return (
      <Button
        onPress={() => {
          setIsShown(true);
        }}
        variant="outline"
      >
        Show the notice again
      </Button>
    );
  }
  return (
    <Notice
      action={
        <Button size="sm" variant="outline">
          Reconnect
        </Button>
      }
      className="max-w-xl"
      onDismiss={() => {
        setIsShown(false);
      }}
      alert={false}
      tone="error"
    >
      We couldn’t sync the clinic’s calendar since 9:40.
    </Notice>
  );
};

<DismissExample />