Floating action button (fab)

A floating action button (FAB) represents the primary action of a screen.

🔗 External documentation.

                        type: string
format: uri-reference

                      

                        type: string

                      

            id: fab
label: 'Floating action button'
description: 'A floating action button (FAB) represents the primary action of a screen. '
homepage: 'https://m2.material.io/develop/web/components/buttons/floating-action-buttons'
variants:
    default:
        id: default
        label: Default
    mini:
        id: mini
        label: Mini
    touch:
        id: touch
        label: Touch
        description: 'Extend the input beyond the visual bounds of the element.'
    mini__touch:
        id: mini__touch
        label: 'Mini & touch'
        description: 'Extend the input beyond the visual bounds of the element.'
    extended:
        id: extended
        label: Extended
        description: 'Modifies the FAB to wider size which includes a text label.'
slots:
    label:
        id: label
        label: Label
        description: 'For extended variant only.'
props:
    url:
        id: url
        label: URL
        description: 'The button URL. Optional.'
        schema:
            type: string
            format: uri-reference
    icon:
        id: icon
        label: Icon
        description: 'Icon list in https://fonts.google.com/icons?selected=Material+Icons'
        schema:
            type: string
library:
    js:
        'https://data.dilla.io/material_2/components/fab/fab_init.js': {  }
    dependencies:
        - material_icons
    id: fab
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': fab
            label: Search
            url: 'http://example.com'
            icon: search