aforemny / material-components-web-elm / Material.IconButton

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

Table of Contents

Resources

Basic Usage

import Material.IconButton as IconButton

type Msg
    = Clicked

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

Configuration


type alias Config msg =
Internal.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 : Basics.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.

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.

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

Specify an icon button's HTML5 arial-label attribute

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

Specify additional attributes

setMenu : Maybe (Menu msg) -> Config msg -> Config msg

Specify a menu to attach to the icon button

The icon button is set as the menu's anchor, however opening the menu still requires the use of Menu.setOpen.

Icon Button

iconButton : Config msg -> Icon -> 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)
    (IconButton.icon "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")
    )
    (IconButton.icon "favorite")

Icon Button with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.


type alias Icon =
Internal.Icon

Icon type

icon : String -> Icon

Material Icon

IconButton.iconButton IconButton.config
    (IconButton.icon "favorite")

customIcon : (List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Html Basics.Never) -> List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Icon

Custom icon

IconButton.iconButton IconButton.config
    (IconButton.customIcon Html.i
        [ class "fab fa-font-awesome" ]
        []
    )

svgIcon : List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Icon

SVG icon

IconButton.iconButton IconButton.config
    (IconButton.svgIcon
        [ Svg.Attributes.viewBox "…" ]
        [-- …
        ]
    )

Focus an Icon Button

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

IconButton.iconButton
    (IconButton.config
        |> IconButton.setAttributes
            [ Html.Attributes.id "my-icon-button" ]
    )
    (IconButton.icon "wifi")

Icon Button with Menu

Icon buttons support opening a menu.

IconButton.iconButton
    (IconButton.config
        |> IconButton.setOnClick (OpenChanged True)
        |> IconButton.setMenu
            (Just <|
                IconButton.menu
                    (Menu.config
                        |> Menu.setOpen True
                        |> Menu.setOnClose (OpenChanged False)
                    )
                    (ListItem.listItem
                        (ListItem.config
                            |> ListItem.setOnClick (OpenChanged False)
                        )
                        [ text "Orange" ]
                    )
                    [ ListItem.listItem
                        (ListItem.config
                            |> ListItem.setOnClick (OpenChanged False)
                        )
                        [ text "Guava" ]
                    ]
            )
    )
    (IconButton.icon "menu_vert")


type alias Menu msg =
Internal.Menu msg

Menu type

menu : Material.Menu.Config msg -> Material.List.Item.ListItem msg -> List (Material.List.Item.ListItem msg) -> Menu msg

Construct a menu to be used with an icon button.