Material.Fab

A floating action button represents the primary action in an application.

A floating action button only contains an icon to indicate its action. For a floating action button that may contain text, refer to the extended floating action button.

Resources
Basic Usage
Configuration
- Configuration Options
Floating Action Button
Mini FAB
Exited FAB
Focus a FAB

Resources

Basic Usage

Developers are required to manually position the floating action button within their page layout, for instance by setting a fixed position via CSS.

import Html.Attributes exposing (style)
import Material.Fab as Fab


type Msg
    = FabClicked


main =
    Fab.fab
        (Fab.config
            |> Fab.setOnClick FabClicked
            |> Fab.setAttributes
                [ style "position" "fixed"
                , style "bottom" "2rem"
                , style "right" "2rem"
                ]
        )
        "favorite"

Configuration

type Config msg

Floating action button configuration

config : Config msg

Default floating action button configuration

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks the floating action button

setMini : Bool -> Config msg -> Config msg

Specify whether the floating actions button should be smaller than normally

setExited : Bool -> Config msg -> Config msg

Specify whether a floating action button should transition off the screen

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

Specify additional attributes

Floating Action Button

fab : Config msg -> String -> Html msg

Floating action button view function

Mini FAB

If you want the floating action button to appear in smaller size, set its setMini configuration option to True.

Fab.fab (Fab.config |> Fab.setMini True) "favorite"

Exited FAB

If you want the floating action button to transition off the screen, set its setExited configuration option to True.

Fab.fab (Fab.config |> Fab.setExited True) "favorite"

Focus a FAB

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

Fab.fab
    (Fab.config
        |> Fab.setAttributes
            [ Html.Attributes.id "my-fab" ]
    )
    "favorite_border"

aforemny/material-components-web-elm/4.0.0