## Anatomy
The Announcement consists of five primary elements that work together to communicate app-wide information to users.
1. Status background
2. Status icon
3. Title
4. Action (Optional)
5. Close action (Optional)
## Options
The Announcement supports three status types and flexible action configurations to accommodate various app-wide messaging scenarios.
### Status
```tsx lines theme={null}
import { Announcement, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Status type | Description |
| ----------- | --------------------------------------------------------------------- |
| Info | Used for neutral or positive app-wide information. |
| Warning | Used for important message to users, typically requiring action soon. |
| Danger | Used to convey a major, blocking app-wide issue. |
### Close
```tsx lines theme={null}
import { Announcement, 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 announcement must persist, such as in warning or danger scenarios.
### Action
```tsx lines theme={null}
import { Announcement, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
An optional, single action can be added to the Announcement. All action Buttons should use the `"default"` or `"secondary"` appearance to maintain visual hierarchy within the Announcement.
## Behavior
The Announcement responds to content overflow by truncating text while maintaining its fixed height.
### Overflow handling
```tsx lines theme={null}
import { Announcement, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
When space is unavailable, text truncates. The Announcement height remains constant.
## Usage Guidelines
### When to Use
Announcements convey app-wide information. Examples include feature releases, maintenance messaging, and sandbox status.
### When not to use
Announcements should not be used for specific sections of an app, or to convey normal error messaging.
### Alternatives
#### Announcement vs Alert
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.
#### Announcement vs Toast
Announcements are used to convey app-wide messages, such as a new release being available, application maintenance, or sandbox information.
Toasts are short pieces of information usually prompted by user action.
### How to Use
#### Layout positions
Position announcements above all other elements with sticky or fixed positioning. If top placement is not possible, bottom placement with fixed positioning is an alternative, though not recommended. Do not place announcements in other locations.
**Do**
**Caution**
Place announcements at the bottom only when top placement is not possible.
**Don't**
Don't place Announcements inside normal content.
## Content
Content within the Announcement should communicate clearly and concisely, helping users understand app-wide situations and take appropriate action.
### Make clear and concise announcements that are easy to read and scan
Keep to 1 to 2 sentences where possible. Put the most critical information first. When action is required, explain the main task and why the user should do it.
Don't use periods in short phrases or single sentences, and use sentence case. This helps make the content easier to read and more scannable.
```tsx lines theme={null}
import { Announcement } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
```tsx lines theme={null}
import { Announcement } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Make announcements action-oriented
Provide an action when possible to allow users to resolve the issue described in the announcement.
Follow content guidelines for [Buttons](/docs/web/components/button/design#content-guidelines).
```tsx lines theme={null}
import { Announcement, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Buttons should be clear, predictable, and action-oriented
Users should be able to predict what will happen when they click a button.
Lead with a strong verb that encourages action. Use a verb/noun pair on actions in most cases. Common actions like Save, Close, or Cancel do not require an accompanying noun.
```tsx lines theme={null}
import { Button, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
```tsx lines theme={null}
import { Button, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Keyboard Interaction
Users can navigate the Announcement using standard keyboard controls.
If an action exists in the Announcement (the close or optional action), it will use the [Button](/docs/web/components/button/design)'s keyboard interactions, otherwise the Announcement has no keyboard interactions.
