Bain Logo

Snackbar

Jump to Props

Provide brief messages about app processes

Snackbars inform users of a process that an app has performed or will perform. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

They should generally contain limited text (single line) that is directly related to the operation performed. Snackbars may contain a text action (such as Undo), but should not contain icons.

You can use them to display notifications.

Handling the State

This is currently left up to the developer. Basically, something needs to trigger the isOpen prop to be set to true. You can pass in an onClose handler to add close icon into the Snackbar.

Additional action

For some cases you may wish to offer the user a follow-up action. For instance, if the Snackbar confirms that the user deleted something, they could 'undo' that action. Another example might be if somethin was moved from one location to a new location, you could either locate the new file, or go to page etc.

Tone of Voice

Keep it short, but friendly. The text in the snackbar should relate to the text in the button that triggered the event. For instance, if you are clicking a button that says "Delete Email", the Snackbar should say "Email deleted." not, for instance "Successfully removed.".

Positioning the Snackbar

You can do this by settings the position object's vertical and horizontal properties.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
isOpenbooleanfalse

The visible state of the Snackbar

messagestring

The text content to display in the snackbar.

position{ vertical: 'bottom', horizontal: 'left' }{ vertical: 'bottom', horizontal: 'left' }

The position of the Snackbar

onClosefunctionnull

Called after the component closes or is dismissed.

additionalActionfunctionnull

An optional action can be passed in to perform follow up actions such as Undo.

additionalActionLabelstringnull

A word to describe the action. It will appear in the button.

autoHideDurationnumbernull

Time in milliseconds before the component disappears. Null value will mean it does not disappear unless dismissed with an onClose handler

shouldCloseOnClickAwaybooleanfalse

Set to true if you want the component to close when the user clicks anywhere outside it. Useful for less important messages.

keystring | number

If you are handling multiple instances of a Snackbar, you may need to provide a key.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy