Snackbars provide brief messages about app processes at the bottom of the screen.

Table of Contents

• Resources
• Basic Usage
• 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
    exposing
        ( snackbar
        , snackbarConfig
        )


type alias Model =
    { queue : Snackbar.Queue }


type Msg
    = SnackbarMsg Snackbar.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 SnackbarMsg snackbarConfig model.queue

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 and initialize it to initialQueue.

type alias Model =
    { queue : Snackbar.Queue }


initialModel =
    { queue = Snackbar.initialQueue }

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

type Msg
    = SnackbarMsg Snackbar.Msg

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

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

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

Adding Messages

Note that addMessage takes SnackbarMsg as first parameter.

update : Msg -> ( Model, Cmd Msg )
update msg model =
    SomethingHappened ->
        let
            message =
                { snackbarMessage
                    | label = "Something happened"
                }
        in
        ( model, addMessage SnackbarMsg message )

Messages

At the minimum, a message contains only a label. To specify the label, set the label configuration field to a String.

{ snackbarMessage | label = "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 actionButton configuration field to a String, and handle the event in onActionButtonClick.

{ snackbarMessage
    | label = "Something happened"
    , actionButton = Just "Take action"
    , onActionButtonClick = Just 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 actionIcon configuration field to a String, and handle the event in onActionIconClick.

{ snackbarMessage
    | label = "Something happened"
    , actionIcon = Just "close"
    , onActionIconClick = Just 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 stacked configuration field to True.

{ snackbarMessage
    | label = "Something happened"
    , actionButton = Just "Take action"
    , stacked = 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 leading configuration field to True.

{ snackbarMessage
    | label = "Something happened"
    , leading = True
}

Custom timeout

To set a custom timeout for a message, set its timeoutMs configuration field to a Float, representing the on-screen time in milliseconds.

{ snackbarMessage
    | label = "Something happened"
    , timeoutMs = 5000
}