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?

  • 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';