Snackbar

Anatomy

1. Container: Main container of the component.
2. Message: A short and concise message used to describe the operation or process that has taken place. Should be no longer than 2 lines.
3. Dismissive Icon: Used to dismiss the snackbar.
4. Leading Icon: Optional icon at the leading edge used to support the overall message.

Usage Guidance

• Snackbars do not require user interaction.
• Snackbars do not block user interaction with the page.
• Snackbars are temporary and their messages should not contain critical information that is imperative to the function of the page.

When to Use

• Snackbars should be used to communicate low impact updates or feedback about system processes.

When to Consider Something Else

• If the communication includes an action, consider using a Banner or Alert Dialog.
• If the communication is specific to errors or warnings on the page, use a Banner.
• If information is critical and requires user action or decision, consider using an Alert Dialog. Alert Dialogs are reserved for messages of the highest priority; they command user action by blocking any other interactions.
• Because snackbars are temporary messages, they should not be used for any messaging that needs to always remain visible, instead consider placing the content within the page and not in a popup.
• When no content can display on a page (due to a server error or connectivity issue, for example), use an Empty State, use the full page to communicate the status of the feature or to help educate users about its purpose. Empty states should include a message.

Behaviors

Placement

Snackbars reside at the bottom of the screen elevated above most all other screen elements. However they should never impede the Bottom Navigation Bar or any system bars and should instead reside 16 pts/dps above them. Snackbars should span the width of the screen minus a 16pt left/right page margin. Snackbars on iPad have a maximum width of 600 pts and are center aligned at the bottom of the screen.

Closing

Snackbars can be dismissed one of three ways:

1. Tapping on the X icon within the snackbar.
2. Swiping left, right, or down on the snackbar.
3. Waiting 7 seconds, at which point they will automatically dismiss.

Multiple Messages

If communication about multiple processes is required, these should be broken up into multiple snackbars. However, a single snackbar should only be displayed at a time with each subsequent snackbar appearing after the previous one is dismissed.

API Guidelines

Methods

Class name: Snackbar Module name: UIComponentsPlugin

    public init(
        featureData: FeatureMetricsData,
        isPresented: Binding<Bool>,
        message: String,
        leadingWDIconName: String? = nil,
        leadingIconAccessibilityLabel: String? = nil,
        dismissClosure: @escaping () -> Void = {},
        localizer: LocalizationAdapting
    )

Parameters

Accessibility Guidelines

Coming soon…

Content Guidelines

Snackbars are meant to be low emphasis, therefore the messages should be short and concise in order to maintain a lower imprint. Snackbars can accommodate multiple lines of text if need be.

Anatomy

1. Container: Main container of the component.
2. Message: A short and concise message used to describe the operation or process that has taken place. Should be no longer than 2 lines.
3. Dismissive Icon: Used to dismiss the snackbar.
4. Leading Icon: Optional icon at the leading edge used to support the overall message.

Usage Guidance

• Snackbars do not require user interaction.
• Snackbars do not block user interaction with the page.
• Snackbars are temporary and their messages should not contain critical information that is imperative to the function of the page.

When to Use

• Snackbars should be used to communicate low impact updates or feedback about system processes.

When to Consider Something Else

• If the communication includes an action, consider using a Banner or Alert Dialog.
• If the communication is specific to errors or warnings on the page, use a Banner.
• If information is critical and requires user action or decision, consider using an Alert Dialog. Alert Dialogs are reserved for messages of the highest priority; they command user action by blocking any other interactions.
• Because snackbars are temporary messages, they should not be used for any messaging that needs to always remain visible, instead consider placing the content within the page and not in a popup.
• When no content can display on a page (due to a server error or connectivity issue, for example), use an Empty State, use the full page to communicate the status of the feature or to help educate users about its purpose. Empty states should include a message.

Behaviors

Placement

Snackbars reside at the bottom of the screen elevated above most all other screen elements. However they should never impede the Bottom Navigation Bar or any system bars and should instead reside 16 pts/dps above them. Snackbars should span the width of the screen minus a 16pt left/right page margin. Snackbars on iPad have a maximum width of 600 pts and are center aligned at the bottom of the screen.

Closing

Snackbars can be dismissed one of three ways:

1. Tapping on the X icon within the snackbar.
2. Swiping left, right, or down on the snackbar.
3. Waiting 7 seconds, at which point they will automatically dismiss.

Multiple Messages

If communication about multiple processes is required, these should be broken up into multiple snackbars. However, a single snackbar should only be displayed at a time with each subsequent snackbar appearing after the previous one is dismissed.

API Guidelines

Methods

Class name: SnackBarUiComponent

  @Composable
  fun SnackBarUiComponent(
      hostStateWrapper: SnackbarHostStateWrapper,
      modifier: Modifier = Modifier,
      message: String,
      leadingIcon: Painter? = null,
      leadingIconContentDescription: String? = null
  )

Steps to show the Snackbar from a screen:

1. Add the [SnackBarUiComponent] as the SnackbarHost on the screen where the snackbar needs to be displayed.
2. Add the [UIComponentsSnackbarHostState] to the screen that is using this component and call the [UIComponentsSnackbarHostState.showSnackbar] method to show the Snackbar.

Parameters

Accessibility Guidelines

Coming soon…

Content Guidelines

Snackbars are meant to be low emphasis, therefore the messages should be short and concise in order to maintain a lower imprint. Snackbars can accommodate multiple lines of text if need be.