Go Main page
Go Main page

Web components

cover

components

Snackbar

v.1.0.0 | Saturn

Short message that provide brief notification. The component is also known as toast.

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
width
fluid (content) and
height
fluid (100% bounded by parent element).

2

Icon
Required
Icon helps identify the message type.

3

Title
Required
By accessibility the messages must always be accompanied by a title that defines the type of message: informative, warning, error... If we need to complement the title we would put it after the type of message.

4

Body text
Define the message.

5

Close button
It close the message.

6

Action button
It performs an action related to the message.

States

Informative

Provides information related to an action.

Foo

Warning

Indicates an action that is relevant but not alarming to the user.

Foo

Success

Indicates that an action was successfully processed.

Foo

Error

Indicates an error in an action.

Foo

Layout

With sticky footer

  • Center aligned and placed 0px above the sticky footer.
  • By itself

  • Center aligned and placed 24 px to the bottom of the screen.
  • Behaviours

    Close Simple Snackbar

  • It will disappear from the screen after 10 seconds. The message will also disappear if the user changes page or screen.
  • Close Complex Snackbar

  • The user can dismiss the snackbar by clicking the close button.
  • Sometimes the snackbar will need an action by the user, the link gives the user the possibility to make an action by clicking on it, once the link is clicked, snackbar will close. But the user also has the possibility to dismiss the snackbar by clicking the close button.
  • The message will also disappear if the user changes page or screen.
  • When to use

    Simple

    Used to notify users about the status of an action.

    When to use: For simpler notifications, when it is not needed to make an action by the user.

    Foo

    Complex

    Used to notify users about the status of an action when it is needed an action or when an error occurs in the proccess.

    When to use: For simpler notifications, when it is needed to make an action by the user.

    Foo

    Do's and dont's

    Foo

    Don’t

    Use more than one snackbar at the same time stacking them one on the top of another. When multiple updates are neccessary, they should appear once at a time.

    Foo

    Caution

    Link action need cannot be ignore or similar, as snackbar dissapears by default on their own if there is no interaction needed.

    Foo

    Caution

    Snackbar should be brief and avoid long paragraphs of text (Max recommended 60 characters)