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