Material.Button

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

Resources
Basic Usage
Configuration
- Configuration Options
Button Variants
Button with Icons
- Button with Leading Icon
- Button with Trailing Icon
Disabled Button
Dense Button
Link Button
Focus a Button
Touch Support

Resources

Basic Usage

import Material.Button as Button


type Msg
    = Clicked


main =
    Button.text
        (Button.config |> Button.setOnClick Clicked)
        "Text"

Configuration

type alias Config msg =

Config msg

Configuration of a button

config : Config msg

Default configuration of a button

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks a button

setIcon : Maybe String -> Config msg -> Config msg

Specify whether the button features an icon

setTrailingIcon : Bool -> Config msg -> Config msg

Specify whether a button's icon is a trailing icon.

Trailing icons are displayed after the button's label rather than before.

setDisabled : Bool -> Config msg -> Config msg

Specify whether the button is disabled

Disabled buttons cannot be interacted with and do not have no visual interaction effect.

setDense : Bool -> Config msg -> Config msg

Specify whether a button is dense

Dense buttons feature smaller than normal padding.

setHref : Maybe String -> Config msg -> Config msg

Specify whether a button is a link button.

Link buttons behave like normal HTML5 anchor tags. Note that link buttons cannot be disabled and ignore that configuration option.

setTarget : Maybe String -> Config msg -> Config msg

Specify the target for a link button.

Note that this configuration option will be ignored by buttons that do not also set setHref.

setTouch : Bool -> Config msg -> Config msg

Specify whether touch support is enabled (enabled by default)

Touch support is an accessibility guideline that states that touch targets should be at least 48 x 48 pixels in size. Use this configuration option to disable increased touch target size.

Note: Buttons with touch support will be wrapped in a HTML div element to prevent potentially overlapping touch targets on adjacent elements.

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Button Variants

Buttons may appear in different variants. Use text or outlined if you want a button that is flush with the surface, and use raised or unelevated for a button that is contained.

text : Config msg -> String -> Html msg

Text button variant (flush without outline)

outlined : Config msg -> String -> Html msg

Outlined button variant (flush with outline)

raised : Config msg -> String -> Html msg

Raised button variant (contained with elevation)

unelevated : Config msg -> String -> Html msg

Unelevated button variant (contained without elevation)

Button with Icons

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

Button with Leading Icon

Button.text
    (Button.config |> Button.setIcon (Just "favorite"))
    "Like"

Button with Trailing Icon

Button.text
    (Button.config
        |> Button.setIcon (Just "favorite")
        |> Button.setTrailingIcon True
    )
    "Like"

Disabled Button

To disable a button, use its setDisabled configuration option. Disabled buttons cannot be interacted with and have no visual interaction effect.

Button.text
    (Button.config |> Button.setDisabled True)
    "Disabled"

Dense Button

To make a button's text and container margins slightly smaller, use its setDense configuration option.

Button.text
    (Button.config |> Button.setDense True)
    "Dense"

Link Button

To make a button essentially behave like a HTML anchor element, use its setHref configution option. You may use its setTarget configuration option to specify a target.

Button.text
    (Button.config
        |> Button.setHref (Just "https://elm-lang.org")
    )
    "Visit"

Note that link buttons cannot be disabled.

Focus a Button

You may programatically focus a button by assigning an id attribute to it and use Browser.Dom.focus.

Button.text
    (Button.config
        |> Button.setAttributes
            [ Html.Attributes.id "my-button" ]
    )
    "Button"

Touch Support

Touch support is enabled by default. To disable touch support set a button's setTouch configuration option to False.

Button.text
    (Button.config
        |> Button.setTouch False
    )
    "Click"

aforemny/material-components-web-elm/4.0.0