Material.Fab

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

Resources
Basic Usage
Floating Action Button
- Mini FAB
- Exited FAB
Extended Floating Action Button
- Extended FAB with Icon
  - Extended FAB with Leading Icon
  - Extended FAB with Trailing Icon
- Exited Extended 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.

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 below.

import Material.Fab exposing (fab, fabConfig)


type Msg
    = FabClicked


main =
    fab { fabConfig | onClick = Just FabClicked }
        "favorite"

Floating Action Button

fab : FabConfig msg -> String -> Html msg

Floating action button view function

fabConfig : FabConfig msg

Default floating action button configuration

type alias FabConfig msg =

{ mini : Bool

, exited : Bool

, onClick : Maybe msg

, additionalAttributes : List (Attribute msg)

}

Floating action button configuration

Mini FAB

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

fab { fabConfig | mini = True } "favorite"

Exited FAB

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

fab { fabConfig | exited = True } "favorite"

Extended Floating Action Button

extendedFab : ExtendedFabConfig msg -> String -> Html msg

Extended floating action button view function

extendedFabConfig : ExtendedFabConfig msg

Default extended floating action button configuration

type alias ExtendedFabConfig msg =

{ icon : Maybe String

, trailingIcon : Bool

, exited : Bool

, onClick : Maybe msg

, additionalAttributes : List (Attribute msg)

}

Extended floating action button configuration

Extended FAB with Icon

To add an icon to a extended floating action button, set its icon configuration field to the name of a Material Icon. If you want the icon to be positioned after the button's label, also set the trailingIcon configuration field to True.

Extended FAB with Leading Icon

extendedFab { extendedFabConfig | icon = "favorite" }
    "Favorites"

Extended FAB with Trailing Icon

extendedFab
    { extendedFabConfig
        | icon = "favorite"
        , trailingIcon = True
    }
    "Favorites"

Exited Extended FAB

If you want the extended floating action button to transition off the screen, set its exited configuration field to True.

extendedFab { extendedFabConfig | exited = True }
    "Favorites"

aforemny/material-components-web-elm/2.0.0