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

# Notifications - Web

Notifications are essential in digital products to alert, warn, or give positive feedback. They give awareness and confidence to the user as they interact throughout the product.

![Overview of a
Notification](https://mintcdn.com/servicetitan/UmHUvEuYrbSv6t_f/images/docs/web/patterns/shared/overview-of-a-notification.png?fit=max\&auto=format\&n=UmHUvEuYrbSv6t_f\&q=85\&s=fae746a0e54b8f62dd2a388477db91e8)

## Message priority

When deciding what to use for a notification, you have to understand how important the message is to the user and/or the system.

| Component | High | Medium | Low |
| - | - | - | - |
| [Announcement](https://anvil.servicetitan.com/docs/components/announcement/design) | ✓ | | |
| [Dialog](https://anvil.servicetitan.com/docs/components/dialog/design) | ✓ | | |
| [Toast](https://anvil.servicetitan.com/docs/components/toast/design) | ✓ | ✓ | ✓ |
| [Alert](https://anvil.servicetitan.com/docs/components/alert/design) | | ✓ | ✓ |

Use one of the following criteria for determining notification priority:

### High priority

* Messages that persist across the entire app (system or account level)
* Messages that require an interruption and user action to proceed
* Messages that are important for users to see from ST’s perspective - new feature announcement etc.

### Medium priority

* Messages to indicate status of information on a page
* Messages to indicate status of actions taken, including additional information on how to proceed

### Low priority

* Messages to indicate status of actions taken, without needing additional information or actions

## Announcement

Announcement component can be used for high priority notification that is persistent across the entire application. Primary use cases are to notify things such as New Feature or System-Wide status such as "Server is down" or "Unable to connect to the internet" Announcements should not stack and only appear one at a time.

notifications-announcement

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-announcement?file=src/App.tsx)

```tsx lines theme={null}
import { Announcement, Button } from "@servicetitan/anvil2";

function App() {
  return (
    <Announcement title="Unable to connect to the internet" status="danger">
      <Button size="small">Retry</Button>
    </Announcement>
  );
}

export default App;
```

## Dialog

Dialog is a component that can be used for notification. It can be used for high priority notification that interrupts user until an action is taken. A primary use case is confirmation of deletion on critical information.

notifications-dialog

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-dialog?file=src/App.tsx)

```tsx lines theme={null}
import { Dialog, Flex, Button } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ minWidth: "23rem", minHeight: "14rem" }}>
      <Dialog open>
        <Dialog.Header>Delete email?</Dialog.Header>
        <Dialog.Content>
          Are you sure you want to delete this email and it scheduling interval?
        </Dialog.Content>
        <Dialog.Footer>
          <Flex justifyContent="flex-end">
            <Flex gap="3">
              <Dialog.CancelButton>Cancel</Dialog.CancelButton>
              <Button appearance="danger">Delete</Button>
            </Flex>
          </Flex>
        </Dialog.Footer>
      </Dialog>
    </div>
  );
}

export default App;
```

## Toast

Toast component can be used as any priority notifications. The notification is not bound to the current page content, and it can notify users about another part of the app. By default, it can stack up to 5 and also queues after 5 showing visually. A primary use case is a notification to show the progress bar.

notifications-toast

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-toast?file=src/App.tsx)

```tsx lines theme={null}
import { toast, ProgressBar } from "@servicetitan/anvil2";
import { useEffect, useRef } from "react";

function App() {
  const firstRenderRef = useRef(true);

  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false;

      toast.success({
        title: "Successful import",
        message: (
          <ProgressBar label="" max="100" value="100" />
        ) as unknown as string,
        actions: {
          primary: {
            label: "View Import",
          },
        },
      });
      toast.info({
        title: "Import adjustments",
        message: (
          <ProgressBar label="In progress" value="30" />
        ) as unknown as string,
        actions: {
          primary: {
            label: "Cancel",
          },
        },
      });
    }
  }, []);

  return <div style={{ width: "100%", height: "100%" }}></div>;
}

export default App;
```

## Alert

Alert component is used for contextual notifications for items such as a page or a section on a page. It can be used for medium to low priority notification and ideally placed above the related content. A primary use case is to show error messages for a [form group](https://anvil.servicetitan.com/docs/patterns/forms/web.md). Learn more about this on the [error pattern page](https://anvil.servicetitan.com/docs/patterns/errors-and-warnings/web.md).

notifications-alert

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-alert?file=src/App.tsx)

```tsx lines theme={null}
import { Alert, Grid, TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <Grid gap="6">
      <Alert title="Enter a valid area code" status="danger" />
      <Grid gap="6" templateColumns="1fr 1fr">
        <TextField label="First Name" defaultValue="Jane" />
        <TextField label="Last Name" />
      </Grid>
      <TextField label="Email Address" defaultValue="emailservicetitan.com" />
      <TextField
        label="Phone Number"
        defaultValue="555-5555"
        hint="(xxx) xxx–xxxx"
        error="Enter a valid area code"
      />
    </Grid>
  );
}

export default App;
```

### Grouping multiple messages in one Alert

When multiple messages related to a single Alert exist, they can be combined into one summary Alert. This is usually done when multiple error messages need to be displayed.

notifications-alert-children

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-alert-children?file=src/App.tsx)

```tsx lines theme={null}
import { Alert, Grid, TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <Grid gap="6">
      <Alert
        title="Please fix the following elements and submit again"
        status="danger"
      >
        <ul style={{ margin: 0, paddingLeft: "1.5rem" }}>
          <li>Enter a last name</li>
          <li>Enter a valid email address</li>
          <li>Enter a valid area code</li>
        </ul>
      </Alert>
      <Grid gap="6" templateColumns="1fr 1fr">
        <TextField label="First Name" defaultValue="Jane" />
        <TextField label="Last Name" error="Enter a last name" />
      </Grid>
      <TextField
        label="Email Address"
        defaultValue="emailservicetitan.com"
        error="Enter a valid email address"
      />
      <TextField
        label="Phone Number"
        defaultValue="555-5555"
        hint="(xxx) xxx–xxxx"
        error="Enter a valid area code"
      />
    </Grid>
  );
}

export default App;
```

### Multiple Alerts

Multiple Alerts can be used at once, divided by category of information. Order should be based on importance.

notifications-alert-multiple

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/notifications-alert-multiple?file=src/App.tsx)

```tsx lines theme={null}
import { Alert, Grid, Flex, TextField, Link } from "@servicetitan/anvil2";

function App() {
  return (
    <Grid gap="6">
      <Flex direction="column" gap="2">
        <Alert
          title="Please fix the following elements and submit again"
          status="danger"
        >
          <ul style={{ margin: 0, paddingLeft: "1.5rem" }}>
            <li>Enter a last name</li>
            <li>Enter a valid email address</li>
            <li>Enter a valid area code</li>
          </ul>
        </Alert>
        <Alert title="Tip on Widgets" status="info">
          <Flex>
            Unsure on how to configure Widgets? Check out our{" "}
            <Link>guide on how to foo bar</Link>.
          </Flex>
        </Alert>
      </Flex>
      <Grid gap="6" templateColumns="1fr 1fr">
        <TextField label="First Name" defaultValue="Jane" />
        <TextField label="Last Name" error="Enter a last name" />
      </Grid>
      <TextField
        label="Email Address"
        defaultValue="emailservicetitan.com"
        error="Enter a valid email address"
      />
      <TextField
        label="Phone Number"
        defaultValue="555-5555"
        hint="(xxx) xxx–xxxx"
        error="Enter a valid area code"
      />
    </Grid>
  );
}

export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.