> ## 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.

# Alert - Web

> Alerts are notifications that informs a user about something.

> [!NOTE]
>
> For development, import `Alert` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=23-2890).

![](https://mintcdn.com/servicetitan/uz2PQSvO75TRhQ38/images/docs/web/components/shared/alert-overview.png?fit=max\&auto=format\&n=uz2PQSvO75TRhQ38\&q=85\&s=4a3dcb4826b2c61058b8db1eb2b5b906)

## Anatomy

The Alert consists of four primary elements that work together to communicate important information to users.

![Anatomy of an
Alert](https://mintcdn.com/servicetitan/ABmJyJBQtPOXixkz/images/docs/web/components/alert/design/anatomy-of-an-alert.png?fit=max\&auto=format\&n=ABmJyJBQtPOXixkz\&q=85\&s=55ecfee5c64789bc31893e4459498674)

1. Status icon
2. Title
3. Close action (Optional)
4. Body content (presented as text and actions) (Optional)

## Options

The Alert supports four status types and flexible content configurations to accommodate various messaging scenarios.

### Status

alert-status

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

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

function App() {
  return (
    <Flex direction="column" gap="4" flex="1">
      <Alert title="Info Alert" onClose={() => console.log("info onClose")} />
      <Alert
        title="Success Alert"
        status="success"
        onClose={() => console.log("success onClose")}
      />
      <Alert
        title="Warning Alert"
        status="warning"
        onClose={() => console.log("warning onClose")}
      />
      <Alert
        title="Danger Alert"
        status="danger"
        onClose={() => console.log("danger onClose")}
      />
    </Flex>
  );
}

export default App;
```

| Status type | Description |
| - | - |
| Info | Used for neutral types of notification to users. |
| Success | Used for positive-type confirmations to users. |
| Warning | Used to convey important information that may require user action soon. |
| Danger | Used to convey critical errors that require user action. |

### Content Area

The Alert allows for any type of content inside below the title and icon. This is typically represented as text and 0–2 actions (as [Secondary Buttons](https://anvil.servicetitan.com/docs/components/button/design#appearances)).

alert-content

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

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

function App() {
  return (
    <Flex direction="column" gap="4" flex="1">
      <Alert title="Alert title" onClose={() => console.log("onClose")} />
      <Alert title="Alert title" onClose={() => console.log("onClose")}>
        Body text to the alert.
      </Alert>
      <Alert title="Alert title" onClose={() => console.log("onClose")}>
        Body text to the alert.
        <Flex gap="3">
          <Button>Button</Button>
          <Button>Button</Button>
        </Flex>
      </Alert>
    </Flex>
  );
}

export default App;
```

### Close

alert-onclose

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

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

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Flex direction="column" gap="4" flex="1">
      {isOpen ? (
        <Alert title="Closeable Alert" onClose={() => setIsOpen(false)} />
      ) : (
        <Button
          size="large"
          onClick={() => setIsOpen(true)}
          style={{ width: "100%" }}
        >
          Open Alert
        </Button>
      )}

      <Alert title="Alert without onClose" />
    </Flex>
  );
}

export default App;
```

Control Alert visibility by conditionally rendering it. Unlike Dialog or Drawer, Alert does not include an open prop. Preserve the close action by default. Remove it only when an alert must persist, such as in warning or danger scenarios.

### AI Mark

ai-mark-alert

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

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

function App() {
  return (
    <Alert
      title="Suggested upsell"
      status="info"
      aiMark
      style={{ maxWidth: "550px" }}
    >
      Customer asked about indoor air quality—consider adding a media filter
      upgrade and UV option to this HVAC maintenance estimate.
    </Alert>
  );
}

export default App;
```

Include an [AI Mark](https://anvil.servicetitan.com/docs/components/ai-mark/code) on an Alert when the title should indicate AI-generated content.

## Behavior

The Alert responds to content overflow by expanding vertically to accommodate longer messages while maintaining its visual structure.

### Overflow handling

alert-overflow

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

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

function App() {
  return (
    <Alert
      title="An alert title will wrap when not enough space is available for it."
      style={{ maxWidth: 325 }}
    >
      Content inside the Alert will overflow depending on how it is implemented,
      with the most typical being wrapping.
      <Flex gap="3">
        <Button>Button</Button>
        <Button>Button</Button>
      </Flex>
    </Alert>
  );
}

export default App;
```

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoKeep users informed | Keep users informed of important information, such as updates, status, and errors. Alerts work across multiple layouts and scopes of notification. |
| Don'tSystem-wide notifications | Alerts should not be used for system-wide notifications. |
| Don'tOverusing Alerts | Avoid overusing Alerts. Overuse can lead to an overwhelming interface. |

### Alternatives

#### Alert vs Announcement

Announcements are used to convey app-wide information. They are placed as a global element on the page. Alerts are contextual to an area of an app, and are more flexible in scope and layout position.

#### Alert vs Dialog

Dialogs are interruptive by design, while an Alert is non-disruptive. Prefer using an Alert when information needs to be conveyed. Use a Dialog only when there is a clear need to interrupt a flow, such as a confirmation of destructive or irreversible actions.

#### Alert vs Toast

Alerts are used to communicate information about either part of a page or a whole page. Alerts can be used to summarize information, such as a summary of errors.

Toasts are brief pieces of information and usually appear as the result of user action.

### How to Use

#### As part of a form

Pair alerts with forms, typically as part of an error pattern.

#### Layout positions

Position alerts toward the top of their related context. This includes UIs such as Pages, Drawers, and Dialogs.

![Example of an alert used in a form](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/alert/web/example-of-an-alert-used-in-a-form.png)

![Example of an alert used in a Dialog](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/alert/web/example-of-an-alert-used-in-a-dialog.png)

![Example of an Alert used in a Drawer](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/alert/web/example-of-an-alert-used-in-a-drawer.png)

![Example of an Alert used in a Page](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/alert/web/example-of-an-alert-used-in-a-page.png)

## Content

Content within the Alert should communicate clearly and concisely, helping users understand the situation and take appropriate action.

### Use a title that identifies the issue

Titles identify the issue clearly. Write titles in sentence case. Put longer copy in the content area, not the title.

alert-identify-the-issue-do

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

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

function App() {
  return (
    <Alert
      status="danger"
      title="Action requires two or more active accounts"
    />
  );
}

export default App;
```

> [!TIP]
>
> **Do**

alert-identify-the-issue-dont

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

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

function App() {
  return <Alert status="danger" title="Action cannot be completed" />;
}

export default App;
```

> [!CAUTION]
>
> **Don't**

### Focus on a single message

The body content should focus on a single, simple message or action to avoid overwhelming the user with too much information. Avoid repeating the information in the title.

Do not use periods in short phrases or single sentences.

An exception to this rule is for a summary of errors, typically found with forms.

alert-single-message-do

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

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

function App() {
  return (
    <Alert status="danger" title="Document theme limit has been reached">
      Delete unused themes to add more
    </Alert>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

alert-single-message-exception

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

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

function App() {
  return (
    <Alert status="danger" title="Unable to process your request">
      We were unable to process your request.
      <ul>
        <li>The document template has a maximum of 20 themes.</li>
        <li>Your document title is limited to 100 characters.</li>
      </ul>
    </Alert>
  );
}

export default App;
```

> [!WARNING]
>
> **Caution**

### Write concise, action-oriented body content

alert-concise-do

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

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

function App() {
  return (
    <Alert status="warning" title="Document theme limit has been reached">
      Delete unused themes to add more
    </Alert>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

alert-concise-dont

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

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

function App() {
  return (
    <Alert
      status="warning"
      title="Document theme limit has been reached"
      style={{ maxWidth: "35rem" }}
    >
      You have reached your theme limit. Your document template has reached its
      maximum of 20 themes. To add more themes, delete themes you’re no longer
      using.
    </Alert>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

## Keyboard Interaction

Users can navigate the Alert using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Move to the next tab-able element within the Alert or the page. |

## Code

**Implementation**

alert-playground

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

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

function App() {
  return (
    <Alert status="warning" title="Alert Warning">
      Warning message
    </Alert>
  );
}

export default App;
```

## Common Examples

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

function ExampleComponent() {
  return (
    <Alert status="warning" title="Warning!">
      This is a warning message.
    </Alert>
  );
}
```

### Alert statuses

Use the `status` prop to set the color and icon of the `Alert`.

alert-status

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

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

function App() {
  return (
    <Flex direction="column" gap="4" flex="1">
      <Alert title="Info Alert" onClose={() => console.log("info onClose")} />
      <Alert
        title="Success Alert"
        status="success"
        onClose={() => console.log("success onClose")}
      />
      <Alert
        title="Warning Alert"
        status="warning"
        onClose={() => console.log("warning onClose")}
      />
      <Alert
        title="Danger Alert"
        status="danger"
        onClose={() => console.log("danger onClose")}
      />
    </Flex>
  );
}

export default App;
```

### Closable alerts

Make an alert closable by providing a value to the `onClose` prop.

Unlike `Dialog`, `Drawer`, and `Popover`, `Alert` does not have an `open` prop.
Show and hide the alert by conditionally rendering it. In `onClose`, update your
state and stop rendering the `Alert` (for example `{isOpen ? <Alert ... /> : null}`).

alert-onclose

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

```tsx lines expandable theme={null}
import { Alert, Flex, Button } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Flex direction="column" gap="4" flex="1">
      {isOpen ? (
        <Alert title="Closeable Alert" onClose={() => setIsOpen(false)} />
      ) : (
        <Button
          size="large"
          onClick={() => setIsOpen(true)}
          style={{ width: "100%" }}
        >
          Open Alert
        </Button>
      )}

      <Alert title="Alert without onClose" />
    </Flex>
  );
}

export default App;
```

### Alerts with actions

It is common to use Anvil2 [Buttons](https://anvil.servicetitan.com/docs/components/button/design) within alerts to create actions. These can easily be arranged using the [Flex](https://anvil.servicetitan.com/docs/components/flex/code) component.

alert-button

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

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

function App() {
  return (
    <Alert status="danger" title="Problem loading data">
      <Text>
        There was an error loading the page data. Please refresh the page.
      </Text>
      <Flex gap={4}>
        <Button>Refresh Page</Button>
        <Button>Message Support</Button>
      </Flex>
    </Alert>
  );
}

export default App;
```

### AI Mark

Add an [AI Mark](https://anvil.servicetitan.com/docs/components/ai-mark/code) inline after the alert title by passing `aiMark`. Use `true` for the sparkle only, or pass tooltip or popover configuration.

ai-mark-alert

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

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

function App() {
  return (
    <Alert
      title="Suggested upsell"
      status="info"
      aiMark
      style={{ maxWidth: "550px" }}
    >
      Customer asked about indoor air quality—consider adding a media filter
      upgrade and UV option to this HVAC maintenance estimate.
    </Alert>
  );
}

export default App;
```

**Alert Props**

```tsx theme={null}
<Alert
  title="Warning!"
  status="warning"
  onClose={(e) => console.log("Alert closed")}
>
  This is a warning message.
</Alert>
```

## `Alert` Props

**title** `string` *required*

**aiMark** `boolean | AiMarkWithTooltipOrPopoverConfig`

When set, displays the AI mark inline after the title. Use `true` for the sparkle only, or pass tooltip or popover configuration. See [AI Mark](https://anvil.servicetitan.com/docs/components/ai-mark/code).

**onClose** `(e: MouseEvent) =\> void`

Shows a close button. When the user dismisses the alert, `Alert` calls this
handler; update state in the handler and stop rendering the `Alert` to hide
it. `Alert` does not have an `open` prop.

**status** `"info" | "success" | "warning" | "danger"` (default: info)


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