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

Resources

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

Basic Usage

import Material.Snackbar as Snackbar


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


initialModel : Model
initialModel =
    { queue = Snackbar.initialQueue }


type Msg
    = SnackbarMsg (Snackbar.Msg Msg)


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        SnackbarMsg snackbarMsg ->
            let
                ( newQueue, cmd ) =
                    Snackbar.update SnackbarMsg
                        snackbarMsg
                        model.queue
            in
            ( { model | queue = newQueue }, cmd )


main =
    Snackbar.snackbar SnackbarMsg
        Snackbar.config
        initialModel.queue

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.

To add messages to the queue, you also have to tag Snackbar.Msgs within your application's Msg type.

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


initialModel =
    { queue = Snackbar.initialQueue }


type Msg
    = SnackbarMsg (Snackbar.Msg Msg)

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

type Msg
    = SnackbarMsg (Snackbar.Msg Msg)


update msg model =
    case msg of
        SnackbarMsg snackbarMsg ->
            Snackbar.update SnackbarMsg snackbarMsg model.queue
                |> Tuple.mapFirst
                    (\newQueue -> { model | queue = newQueue })

Now you are ready to call addMessage from your application's update function.

Adding Messages

Note that addMessage takes SnackbarMsg as first parameter.

type Msg
    = SnackbarMsg (Snackbar.Msg Msg)
    | SomethingHappened


update msg model =
    case msg of
        SomethingHappened ->
            let
                message =
                    Snackbar.message
                        |> Snackbar.setLabel (Just "Something happened")
            in
            ( model, Snackbar.addMessage SnackbarMsg message )


        SnackbarMsg snackbarMsg ->
            Snackbar.update SnackbarMsg snackbarMsg model.queue
                |> Tuple.mapFirst
                    (\newQueue -> { model | queue = newQueue })

Messages

At the minimum, a message contains only a label. To specify the label, specify it using the setLabel configuration option.

Snackbar.message
    |> Snackbar.setLabel (Just "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
    |> Snackbar.setLabel (Just "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
    |> Snackbar.setLabel (Just "Something happened")
    |> Snackbar.setActionIcon (Just "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
    |> Snackbar.setLabel (Just "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
    |> Snackbar.setLabel (Just "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.

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