## Anatomy
The Alert consists of four primary elements that work together to communicate important information to users.
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
```tsx lines theme={null}
import { Alert, Flex } from "@servicetitan/anvil2";
function App() {
return (
console.log("info onClose")} />
console.log("success onClose")}
/>
console.log("warning onClose")}
/>
console.log("danger onClose")}
/>
);
}
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](/docs/web/components/button/design#appearances)).
```tsx lines theme={null}
import { Alert, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
console.log("onClose")} />
console.log("onClose")}>
Body text to the alert.
console.log("onClose")}>
Body text to the alert.
);
}
export default App;
```
### Close
```tsx lines theme={null}
import { Alert, Flex, Button } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isOpen, setIsOpen] = useState(true);
return (
{isOpen ? (
setIsOpen(false)} />
) : (
)}
);
}
export default App;
```
Preserve the close action by default. Remove it only when an alert must persist, such as in warning or danger scenarios.
### AI Mark
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
Customer asked about indoor air quality—consider adding a media filter
upgrade and UV option to this HVAC maintenance estimate.
);
}
export default App;
```
Include an [AI Mark](/docs/web/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
```tsx lines theme={null}
import { Alert, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
Content inside the Alert will overflow depending on how it is implemented,
with the most typical being wrapping.
);
}
export default App;
```
## Usage Guidelines
### When to Use
Use alerts to keep users informed of important information, such as updates, status, and errors. Alerts work across multiple layouts and scopes of notification.
### When not to use
Alerts should not be used for system-wide notifications.
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.
## 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.
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
**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.
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
Delete unused themes to add more
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
We were unable to process your request.
The document template has a maximum of 20 themes.
Your document title is limited to 100 characters.
);
}
export default App;
```
**Caution**
### Write concise, action-oriented body content
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
Delete unused themes to add more
);
}
export default App;
```
**Do**
```tsx lines theme={null}
import { Alert } from "@servicetitan/anvil2";
function App() {
return (
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.
);
}
export default App;
```
**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. |
