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