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.

    <Banner
        icon
        title="You are viewing an Inactive Item."
    />

Success

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

    <Banner
        status="success"
        icon
        title="Report sent."
        onPrimaryActionClick={() => {}}
        primaryActionName="View Report"
        onSecondaryActionClick={() => {}}
        secondaryActionName="New Report"
    >
        Your report 'S1234' was sent over to Jane Doe.
    </Banner>

Warning

For information or feedback that needs attention.

    <Banner
        status="warning"
        icon
        title="This report is too large to send."
    />

Critical

When something has gone wrong and action is required.

    <Banner
        status="critical"
        icon
        title="Incorrect password."
    />

Close Action

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

    <Banner
        onClose={() => {}}
        title="You are closing a banner."
    />

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.

    <Stack direction="column" spacing="3">
        <Banner
            onPrimaryActionClick={() => {}}
            primaryActionName="Activate Item"
            title="You are viewing an inactive item."
        />
        <Banner
            onPrimaryActionClick={() => {}}
            primaryActionName="Activate Item"
            onSecondaryActionClick={() => {}}
            secondaryActionName="Manage Items"
            title="You are viewing an inactive item."
        />
        <Banner
            onPrimaryActionClick={() => {}}
            primaryActionName="Activate Item"
            onSecondaryActionClick={() => {}}
            secondaryActionName="Manage Items"
            title="You are viewing in inactive item."
        >
            Changes cannot be made until you activate the item.
        </Banner>
    </Stack>

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.

    <Stack direction="column" spacing="3">
        <Banner title="Select a table">
            <p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
        </Banner>
        <Banner title="Select a table">
            <ul>
                <li>Street address is missing.</li>
                <li>Postal code is missing.</li>
                <li>Phone number is missing.</li>
            </ul>
            <p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
        </Banner>
        <Banner
            status="critical"
            title="Unable to process your request"
        >
            <p>More information is needed in order to process your request.</p>
            <ul>
                <li>Street address is missing.</li>
                <li>Postal code is missing.</li>
                <li>Phone number is missing.</li>
            </ul>
        </Banner>
    </Stack>

More Examples

    <Banner
        icon
        onClose={() => {}}
        onPrimaryActionClick={() => {}}
        primaryActionName="Do Everything"
        onSecondaryActionClick={() => {}}
        secondaryActionName="Do Nothing"
        title="Message sent."
    >
        This is a pretty big notification for something of some significance.
    </Banner>
    <Banner
        status="success"
        icon
        onClose={() => {}}
        onPrimaryActionClick={() => {}}
        primaryActionName="Hello"
        secondaryActionName="Goodbye"
        onSecondaryActionClick={() => {}}
        title="Message sent."
    />
    <Banner
        status="warning"
        icon
        onClose={() => {}}
        title="Message sent."
        onPrimaryActionClick={() => {}}
        primaryActionName="Settings Page"
    >
        This is a pretty big notification for something of some significance.
    </Banner>
    <Stack direction="column" spacing="3">
        <Banner title="Something in a confined area also works for the banner."/>
        <Banner
            status="critical"
            icon
            onClose={() => {}}
            title="Message sent."
            onPrimaryActionClick={() => {}}
            primaryActionName="Retry"
        >
            <p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p>
            <p>Here are some other things you’re being warned about.</p>
            <ul>
                <li>Hey look, it’s a list item.</li>
                <li>Another warning about something.</li>
                <li>Always choose C</li>
                <li>One more for the fans.</li>
            </ul>
        </Banner>
    </Stack>

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.

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:

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