Announcement

For development, import Announcement from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

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

Status background
Status icon
Title
Action (Optional)
Close action (Optional)

Options

The Announcement supports three status types and flexible action configurations to accommodate various app-wide messaging scenarios.

Status

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

Preserve the close action by default. Remove it only when an announcement must persist, such as in warning or danger scenarios.

Action

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

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

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.

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.

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.

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.

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’s keyboard interactions, otherwise the Announcement has no keyboard interactions.

Code

Implementation
Announcement Props

Common Examples

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.

Action Buttons

Pass in a Button as the children of the Announcement to add an action. Multiple actions are allowed, but discouraged.

Closing Announcements

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

<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

string

required

(e: MouseEvent) => void

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

"info" | "success" | "warning" | "danger"

default:"info"

Concepts & Guidelines

Anvil2

Resources

Announcement - Web

Anatomy