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

# Announcement - Web

> Announcement notifications convey app-wide information about an event.

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

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

## Anatomy

The Announcement consists of five primary elements that work together to communicate app-wide information to users.

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

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

announcement-status

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

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

function App() {
  return (
    <Flex direction="column" gap={4} grow={1}>
      <Announcement status="info" title="Info announcement" />
      <Announcement status="warning" title="Warning announcement" />
      <Announcement status="danger" title="Danger announcement" />
    </Flex>
  );
}

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

announcement-onclose

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

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

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

  return (
    <Flex direction="column" gap={4}>
      <Announcement
        status="warning"
        title="You have no credit card specified. Please add it before your service is suspended in 3 days."
      />

      {isOpen ? (
        <Announcement
          status="warning"
          title="You have no credit card specified. Please add it before your service is suspended in 3 days."
          onClose={() => setIsOpen(false)}
        />
      ) : (
        <Button
          size="large"
          onClick={() => setIsOpen(true)}
          style={{ width: "100%" }}
        >
          Open Announcement
        </Button>
      )}
    </Flex>
  );
}

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

announcement-button

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

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

function App() {
  return (
    <Flex direction="column" gap={4}>
      <Announcement title="Info announcement">
        <Button size="small">Button</Button>
      </Announcement>
      <Announcement status="warning" title="Warning announcement">
        <Button size="small">Button</Button>
      </Announcement>
      <Announcement status="danger" title="Danger announcement">
        <Button size="small">Button</Button>
      </Announcement>
    </Flex>
  );
}

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

announcement-overflow

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

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

function App() {
  return (
    <Flex direction="column" gap={4}>
      <Announcement title="Announcement text will truncate instead of wrap">
        <Button size="small">Button</Button>
      </Announcement>
      <div style={{ maxWidth: "450px" }}>
        <Announcement title="Announcement text will truncate instead of wrap">
          <Button size="small">Button</Button>
        </Announcement>
      </div>
    </Flex>
  );
}

export default App;
```

When space is unavailable, text truncates. The Announcement height remains constant.

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoApp-wide information | Announcements convey app-wide information. Examples include feature releases, maintenance messaging, and sandbox status. |
| DoTop or sticky placement | Position announcements above all other elements with sticky or fixed positioning; see [Layout positions](#layout-positions). |
| Don'tSpecific sections or error messaging | Announcements should not be used for specific sections of an app, or to convey normal error messaging. |
| Don'tPlacing inside normal content | Don't place Announcements inside normal content; see [Layout positions](#layout-positions). |

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

![Announcement How Placement
Do](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/announcement/web/announcement-how-placement-do.png)

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

![Announcement How Placement
Caution](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/announcement/web/announcement-how-placement-caution.png)

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

Place announcements at the bottom only when top placement is not possible.

![Announcement How Placement
Don't](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/announcement/web/announcement-how-placement-dont.png)

> [!CAUTION]
>
> **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.

announcement-concise-do

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

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

function App() {
  return (
    <Announcement title="Your web browser is not supported" status="danger" />
  );
}

export default App;
```

announcement-concise-dont

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

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

function App() {
  return (
    <Announcement
      title="Your web browser is not supported at this time"
      status="danger"
    />
  );
}

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](https://anvil.servicetitan.com/docs/foundations/content/actionable-language.md#buttons-and-ctas).

announcement-action-oriented

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

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

function App() {
  return (
    <Announcement title="Your web browser is not supported" status="danger">
      <Button size="small">Learn More</Button>
    </Announcement>
  );
}

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.

announcement-button-action-oriented-do

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

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

function App() {
  return (
    <Grid templateColumns="repeat(1, max-content)" gap="8" placeItems="center">
      <Button size="small">Create Order</Button>
      <Button size="small">Print Label</Button>
    </Grid>
  );
}

export default App;
```

announcement-button-action-oriented-dont

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

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

function App() {
  return (
    <Grid templateColumns="repeat(1, max-content)" gap="8" placeItems="center">
      <Button size="small">New invoice</Button>
      <Button size="small">Schedule</Button>
    </Grid>
  );
}

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](https://anvil.servicetitan.com/docs/components/button/design)'s keyboard interactions, otherwise the Announcement has no keyboard interactions.

## Code

**Implementation**

announcement-playground

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

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

function App() {
  return (
    <Announcement title="This is a sandbox environment, not your live account. Changes made here will not affect your real data." />
  );
}

export default App;
```

## Common Examples

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

function ExampleComponent() {
  return (
    <Announcement
      status="info"
      title="We have an announcement for you. Hopefully you find it informational."
    />
  );
}
```

### Announcement Status

Use the `status` prop to update the colors and icon of the `Announcement`.

announcement-status

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

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

function App() {
  return (
    <Flex direction="column" gap={4} grow={1}>
      <Announcement status="info" title="Info announcement" />
      <Announcement status="warning" title="Warning announcement" />
      <Announcement status="danger" title="Danger announcement" />
    </Flex>
  );
}

export default App;
```

### Action Buttons

Pass in a [Button](https://anvil.servicetitan.com/docs/components/button/design) as the `children` of the `Announcement` to add an action. Multiple actions are allowed, but discouraged.

announcement-button

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

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

function App() {
  return (
    <Flex direction="column" gap={4}>
      <Announcement title="Info announcement">
        <Button size="small">Button</Button>
      </Announcement>
      <Announcement status="warning" title="Warning announcement">
        <Button size="small">Button</Button>
      </Announcement>
      <Announcement status="danger" title="Danger announcement">
        <Button size="small">Button</Button>
      </Announcement>
    </Flex>
  );
}

export default App;
```

### Closing Announcements

Add the `onClose` callback prop to the `Announcement` to include a close button.

announcement-onclose

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

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

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

  return (
    <Flex direction="column" gap={4}>
      <Announcement
        status="warning"
        title="You have no credit card specified. Please add it before your service is suspended in 3 days."
      />

      {isOpen ? (
        <Announcement
          status="warning"
          title="You have no credit card specified. Please add it before your service is suspended in 3 days."
          onClose={() => setIsOpen(false)}
        />
      ) : (
        <Button
          size="large"
          onClick={() => setIsOpen(true)}
          style={{ width: "100%" }}
        >
          Open Announcement
        </Button>
      )}
    </Flex>
  );
}

export default App;
```

**Announcement Props**

```tsx theme={null}
<Announcement
  title="We have an announcement for you"
  status="info"
  onClose={(e) => console.log("Announcement closed")}
>
  <Button size="small">Learn More</Button>
</Announcement>
```

## `Announcement` Props

**title** `string` *required*

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

Providing this prop will render a close button on the announcement.

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


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