Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • When to use ?
  • Design guidelines
  • Content

Was this helpful?

  1. Design
  2. Components
  3. Feedback

Snackbar

A discreet but efficient way to convey feedback on the outcome of an action.

Last updated 1 year ago

Was this helpful?

Overview

Snackbars inform users when a backend action is done. They pop up briefly at the bottom of the screen, explaining the outcome without being too intrusive.

When to use ?

Use snackbars to quickly share results, whether good or bad. For example: 'Item added' or 'Item deleted'

Design guidelines

Prototyping a Snackbar on Figma for designers

  • Trigger : onClick OR onDelay - 50ms

  • Animation type : Custom Spring

  • Duration: 300ms

Content

Keep it short

Snackbars are visible for 5 seconds, users won’t have time to read a long sentence. If you need more than one sentence consider using another component.

Use simple words

Use everyday language and generic terms as much as possible, it’ll be easier to reuse.

Capitalize the first word, no period

Template: Object + verb+ED

Snackbar should not be used to display critical information; use instead. For example: 'You cannot perform this action because your profile has not been verified'

Snackbars can only have one .

alerts
button