MDC

Fab

READMEDemo

Components

  • mdc-fab

Status

Component Ready to use
mdc-fab Nearly Yes

Extended

Code
<mdc-fab open>
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open extended>
    <mdc-icon slot="icon">add</mdc-icon>
    <span>Label</span>
</mdc-fab>

Open

Code
<mdc-fab>
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open>
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

Size

Code
<mdc-fab open size="small">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open size="medium">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open size="large">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

Trailing Icon

Code
<mdc-fab open extended>
    <mdc-icon slot="icon">add</mdc-icon>
    <span>Leading</span>
</mdc-fab>

<mdc-fab open extended trailing-icon>
    <mdc-icon slot="icon">arrow_forward</mdc-icon>
    <span>Trailing</span>
</mdc-fab>

Variant

Code
<mdc-fab open variant="primary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open variant="secondary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open variant="tertiary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open variant="tonal-primary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open variant="tonal-secondary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>

<mdc-fab open variant="tonal-tertiary">
    <mdc-icon slot="icon">add</mdc-icon>
</mdc-fab>