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

Table of Contents

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

Resources

• Demo: Buttons
• Material Design Guidelines: Button
• MDC Web: Button
• Sass Mixins (MDC Web)

Basic Usage

import Material.Button exposing (buttonConfig, textButton)


type Msg
    = ButtonClicked


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

Text 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.

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"

Link Button

Buttons may specify the href configuration field in which case the button essentially behaves like a HTML a element. You may specify the configuration field target as well.

textButton { buttonConfig | href = Just "https://elm-lang.org" } "Visit"

Note that link buttons cannot be disabled.