Status

Info

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

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

    <Announcement
        status="warning"
        title="You have no credit card specified. Please add it before your service is suspended in 3 days."
        onClose={() => {}}
        actionName="Add Credit Card"
        onActionClick={() => {}}
    />

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

Critical

    <Announcement
        status="critical"
        title="Your web browser is not supported at this time."
        actionName="Learn More"
        onActionClick={() => {}}
    />

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

    <Announcement
        title="You're in a box of sand."
        onClose={() => {}}
    />

Call to Action

    <Announcement
        title="We did a thing."
        actionName="Learn More"
        onActionClick={() => {}}
    />

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?

Related Components

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