Snackbars provide brief messages about the application's processes at the bottom of the screen.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Snackbar
• Queue
  • Adding Messages
• Messages
  • Message with Action Icon
  • Stacked Messages
  • Leading Messages
  • Custom Timeout
  • Message with Custom Icon

Resources

• Demo: Snackbars
• Material Design Guidelines: Snackbars
• MDC Web: Snackbar
• Sass Mixins (MDC Web)

Basic Usage

import Browser
import Material.Snackbar as Snackbar


type alias Model =
    { queue : Snackbar.Queue Msg }


type Msg
    = SnackbarClosed Snackbar.MessageId


init =
    { queue = Snackbar.initialQueue }


update msg model =
    case msg of
        SnackbarClosed messageId ->
            { model | queue = Snackbar.close messageId model.queue }


view model =
    Snackbar.snackbar
        (Snackbar.config { onClosed = SnackbarClosed })
        model.queue


main =
    Browser.sandbox
        { init = init, update = update, view = view }

Configuration

Configuration Options

Snackbar

Queue

You will have to maintain a queue of snackbar messages inside your application's model. To do so, add a field queue : Queue msg and initialize it to initialQueue.

type alias Model =
    { queue : Snackbar.Queue Msg }


initialModel =
    { queue = Snackbar.initialQueue }


type Msg
    = SnackbarClosed Snackbar.MessageId

Then from your application's update function, call update to handle Snackbar.Msg. Note that the first argument to update is SnackbarMsg.

type Msg
    = SnackbarClosed Snackbar.MessageId


update msg model =
    case msg of
        SnackbarClosed messageId ->
            { model | queue = Snackbar.close messageId model.queue }

Now you are ready to add messages from your application's update function.

Adding Messages

type Msg
    = SnackbarClosed Snackbar.MessageId
    | SomethingHappened


update msg model =
    case msg of
        SomethingHappened ->
            let
                message =
                    Snackbar.message "Something happened"


                newQueue =
                    Snackbar.addMessage message model.queue
            in
            { model | queue = newQueue }


        SnackbarClosed messageId ->
            let
                newQueue =
                    Snackbar.close messageId model.queue
            in
            { model | queue = newQueue }

Messages

At the minimum, a message contains only a label.

Snackbar.message "Something happened"

Message with Action Button

Messages may contain an action button that the user can click. To display an action button, set the message's setActionButton configuration option to a string, and handle the event in onActionButtonClick.

Snackbar.message "Something happened"
    |> Snackbar.setActionButton (Just "Take action")
    |> Snackbar.setOnActionButtonClick ActionButtonClicked

Message with Action Icon

Messages may contain an action icon that the user can click. To display an action icon, set the message's setActionIcon configuration option to a string representing a Material Icon, and handle the event in onActionIconClick.

Snackbar.message "Something happened"
    |> Snackbar.setActionIcon
        (Just (Snackbar.icon "close"))
    |> Snackbar.setOnActionIconClick Dismissed

Stacked Messages

Messages with a long label and action button should display the action button below the label. To archieve this, set the message's setStacked configuration option to True.

Snackbar.message "Something happened"
    |> Snackbar.setActionButton (Just "Take action")
    |> Snackbar.setStacked True

Leading Messages

Messages are by default centered within the viewport. On larger screens, they can optionally be displyed on the leading edge of the screen. To display a message as leading, set its setLeading configuration option to True.

Snackbar.message "Something happened"
    |> Snackbar.setLeading True

Custom Timeout

To set a custom timeout for a message, set its setTimeoutMs configuration option to a floating point value, representing the on-screen time in milliseconds.

This value must be between 4 and 10 seconds, and it defaults to 5 seconds. You may specify an indefinite timeout by setting it to Nothing.

Snackbar.message "Something happened"
    |> Snackbar.setTimeoutMs (Just 4000)

Message with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.