Snackbar

deprecated

Default Snackbar

<Snackbar duration={0} portal={false} title="Message sent." />

With Action

Action can be used when users have the ability to act on the message. For example, 'Undo' or 'Edit'.

<Snackbar
	duration={0}
	portal={false}
	title="Message sent."
	actionName="Undo"
	onActionClick={() => {}}
/>

With Close Action

An optional close action can exist if the Snackbar needs to stay open.

<Snackbar
	duration={0}
	onClose={() => {}}
	portal={false}
	title="Action undone."
/>

With Action and Close

<Snackbar
	duration={0}
	onClose={() => {}}
	portal={false}
	title="3 reports approved."
	actionName="Undo"
	onActionClick={() => {}}
/>

Duration

By default, the snackbar automatically closes after 5 seconds. This can be configured to a different value or be persistent.

Best Practices

• Messages should be short and clear.
• Don't use the action text to dismiss.
• Don't set the duration below 2 seconds.
• Only show 1 snackbar at a time.
• If a snackbar has an action, give the wording short.
• If the snackbar does not automatically close, use the close option.

Related Components

• To require a user interaction, 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.
• Content specific to the page, use the Banner notification.
• Persistent, detailed feedback, use the Toast notification.

Importing

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