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

Banner

Status Variations

Banner have 4 possible statuses: info (default), success, warning, and critical. An optional icon can also be affixed for each status.

Info (Default)

Use for general, non-critical information.

Success

For giving the user detailed feedback. Use the Snackbar notification for simple success messages.

Warning

For information or feedback that needs attention.

Critical

When something has gone wrong and action is required.


Close Action

In general, banners should be dismissible. Important, persistent events are the general exception.


Buttons

1 or 2 actions can be added to each banner. When there is no body text, buttons will appear on the right, otherwise they go below the body text. The button styling cannot be changed.


Body Text

In addition to a message title, optional copy can be provided. Copy should be inside <p>, <ol>, or <ul> HTML tags if doing more than a single line. Buttons are not added in this area.


More Examples


Best Practices

  • Avoid having the line length of the banner exceeding 100 characters.
  • Banners should be placed close to their context.
  • Be concise and scannable with messages.
  • Don't use on a regular basis to display primary information or actions.
  • Use warning and critical statuses sparingly.

  • 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:

  • Site-wide information about an event, use the Announcement notification.
  • Quick, successful information, use the Snackbar notification.
  • Persistent, detailed feedback, use the Toast notification.

Importing

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