Material.IconButton

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

Resources
Basic Usage
Configuration
- Configuration Options
Icon Button
Disabled Icon Button
Labeled Icon Button

Resources

Basic Usage

import Material.IconButton as IconButton


type Msg
    = Clicked


main =
    IconButton.iconButton
        (IconButton.config |> IconButton.setOnClick Clicked)
        "favorite"

Configuration

type alias Config msg =

Config msg

Icon button configuration

config : Config msg

Default icon button configuration

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks on an icon button

setDisabled : Bool -> Config msg -> Config msg

Specify whether an icon button is disabled

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

setLabel : Maybe String -> Config msg -> Config msg

Specify an icon button's HTML5 arial-label attribute

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

Specify additional attributes

Icon Button

iconButton : Config msg -> String -> Html msg

Icon button view function

Disabled Icon Button

To disable an icon button, set its setDisabled configuration option to True. Disabled icon buttons cannot be interacted with and have no visual interaction effect.

IconButton.iconButton
    (IconButton.config |> IconButton.setDisabled True)
    "favorite"

Labeled Icon Button

To set the HTML attribute arial-label of a icon button, use its setLabel configuration option.

IconButton.iconButton
    (IconButton.config
        |> IconButton.setLabel (Just "Add to favorites")
    )
    "favorite"

Variant: Custom Icon Button

custom : Config msg -> List (Html msg) -> Html msg

TODO

aforemny/material-components-web-elm/3.0.0