---
title: "Notice"
description: "An inline message beside the content it is about: saved, failed, heads-up, or a quiet neutral aside. Errors that just happened are read out at once; everything else is announced politely."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Notice

## Tones

```tsx
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>
```

## Action and dismiss

```tsx
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 />
```

## Source

The examples above are [`src/components/notice/notice.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/notice/notice.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/notice/index.mdx