Skip to content
search icon
clear
Component Status

Notification snackbar

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Snackbar component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Select the Snackbar in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Edit the text. If the text wraps over one line, resize the width of the button to avoid line breaks.
  4. Never add height to snackbars, only resize them horizontally in width.
  5. Edit the action text.

API

Snackbar

PropertyTypeRequiredDefaultDescription
autoHideDurationNumberfalse7000How long will the message be visible in milliseconds
onCloseFuncfalseundefinedCallback fired when the snackbar is closed by auto hide duration timeout
openBoolfalsefalseControls the visibility of the snackbar
leftAlignFromStringfalse1200pxMedia query from which the snackbar will be horizontal centered
classNameStringfalseundefined@ignore
childrenNodetrue-@ignore

SnackbarAction

PropertyTypeRequiredDefaultDescription
childrenNodetrue-@ignore
Edit this page on GitHub