Announcement

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

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.

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.

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.

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