You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Status and Feedback

Announcement

Status

Info

Displays neutral information to the user, such as a release announcement, an unusual site state (e.g. sandbox mode), or non-essential meta information (e.g. email validation, cookie disclaimers).

Warning

Displays an important message to users, typically requesting the user to take action on something.

Critical

Displays a message informing the user of a major error or functionality issue. Not to be confused with page-specific errors. These should not be dismissible.


Options

Close Action

Call to Action


Best Practices

  • A "Success" state is not used for this pattern. Use another notification pattern to give such feedback.
  • Announcements should only appear one at a team, in the order of critical, warning, and info.
  • This pattern should be used sparingly, especially the critical state.
  • It is recommended to include a call to action with an announcement.
  • Consider the user's perspective: Does your notification warrant a site-wide message? Is the situation important enough to give them a scary yellow or red message?

Content Guidelines

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.

Your web browser is not supported.

Your web browser is not supported at this time.

Make announcements action-oriented

Provide an action for the user when possible to allow them to solve the problem in the announcement.

Follow content guidelines for Buttons.

Your web browser is not supported.

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.




  • To require a user interaction isolated from the page content, use a Modal component.
  • For critical information that requires a specific decision, use a Dialog component.
  • For non-intrusive notifications:
    • Quick, successful information, use the Snackbar notification.
    • Persistent, detailed feedback, use the Toast notification.
    • Content specific to the page, use the Banner notification.

Importing

import { Announcement } from '@servicetitan/design-system';