GitHub icon

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.

<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

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

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

Banner