Material.Button

Buttons allow users to take actions, and make choices, with a single tap.

Resources
Basic Usage
Text Button
Button Variants
Button with Icons
- Button with Leading Icon
- Button with Trailing Icon
Disabled Button
Dense Button

Resources

Basic Usage

import Material.Button exposing (buttonConfig, textButton)


type Msg
    = ButtonClicked


main =
    textButton
        { buttonConfig | onClick = Just ButtonClicked }
        "Text"

Text Button

textButton : ButtonConfig msg -> String -> Html msg

Text button variant (flush without outline)

buttonConfig : ButtonConfig msg

Default configuration of a button

type alias ButtonConfig msg =

{ icon : Maybe String

, trailingIcon : Bool

, disabled : Bool

, dense : Bool

, additionalAttributes : List (Attribute msg)

, onClick : Maybe msg

}

Configuration of a button

Button Variants

Buttons may appear in different variants. Use textButton or outlinedButton if you want a button that is flush with the surface, and raisedButton or unelevatedButton for a button that is contained.

outlinedButton : ButtonConfig msg -> String -> Html msg

Outlined button variant (flush with outline)

raisedButton : ButtonConfig msg -> String -> Html msg

Raised button variant (contained with elevation)

unelevatedButton : ButtonConfig msg -> String -> Html msg

Unelevated button variant (contained without elevation)

Button with Icons

To add an icon to a button, set its icon configuration field to the name of a Material Icon. If you want the icon to be positioned after the button's label, also set the trailingIcon configuration field to True.

Button with Leading Icon

textButton
    { buttonConfig | icon = Just "favorite" }
    "Like"

Button with Trailing Icon

textButton
    { buttonConfig
        | icon = Just "favorite"
        , trailingIcon = True
    }
    "Like"

Disabled Button

To disable a button, set its disabled configuration field to True. Disabled buttons cannot be interacted with and have no visual interaction effect.

textButton { buttonConfig | disabled = True } "Disabled"

Dense Button

To make a button's text and container margins slightly smaller, set the dense configuration field to True.

textButton { buttonConfig | dense = True } "Dense"

aforemny/material-components-web-elm/1.0.0