Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Table of Contents

• Resources
• Basic Usage
• Dialog

Resources

• Demo: Dialogs
• Material Design Guidelines: Dialogs
• MDC Web: Dialog
• Sass Mixins (MDC Web)

Basic Usage

import Material.Button exposing (buttonConfig, textButton)
import Material.Dialog exposing (dialog, dialogConfig)


type Msg
    = DialogClosed


main =
    dialog
        { dialogConfig
            | open = True
            , onClose = Just DialogClosed
        }
        { title = Nothing
        , content =
            [ text "Discard draft?" ]
        , actions =
            [ textButton
                { buttonConfig
                    | onClick = Just DialogClosed
                }
                "Cancel"
            , textButton
                { buttonConfig
                    | onClick = Just DialogClosed
                }
                "Discard"
            ]
        }

Dialog