Icon buttons allow users to take actions and make choices with a single tap.
import Material.IconButton as IconButton
type Msg
= Clicked
main =
IconButton.iconButton
(IconButton.config |> IconButton.setOnClick Clicked)
(IconButton.icon "favorite")
Internal.Config msg
Icon button configuration
config : Config msg
Default icon button configuration
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
.
iconButton : Config msg -> Icon -> Html msg
Icon button view function
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")
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")
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
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 "…" ]
[-- …
]
)
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 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")
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.