Fab

The Fab component provides an icon and a label for an important action.

As long as the Fab component is displayed, it is always available. The Fab component has no disabled state.

Required

• mdc-elevation
• mdc-ripple
• mdc-focus-ring

Import

import "@sandlada/mdc/build/components/fab/fab.js"

Props

Variant

Available variants:

• primary
• secondary
• tertiary
• tonal-primary
• tonal-secondary (default)
• tonal-tertiary

<mdc-fab variant="primary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab variant="secondary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab variant="tertiary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab variant="tonal-primary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab variant="tonal-secondary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab variant="tonal-tertiary" extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

Extended

The extended attribute is used to control whether the label is displayed or hidden.

The default value is false (the label is not displayed by default).

<mdc-fab>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

<mdc-fab extended>
    <span>Fab Label</span>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>

Slots

Default Slot

Please make sure that the element of the default slot is wrapped by HTML tags:

<span>Fab Label</span>

<mdc-fab extended>
    <span>Fab Label</span>
</mdc-fab>

Icon

<mdc-fab>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-fab>