sizes
color sets · container
color sets · vivid
extended
extended · size ignored
size has no effect while label is set — all
three render at the same (small-scale) extended height/shape.
extended · overflow
The label truncates with an ellipsis instead of growing past its container.
extended · collapse animation
Toggling label at runtime animates the width and the
label fade (~200ms, emphasized easing; respects
prefers-reduced-motion).
disabled
link
keyboard ripple
Click near the edge with the mouse, then Tab to this FAB and press Space/Enter — the ripple must start from the center, not the earlier click position.
click event
(not clicked)
hide-near-end
Scroll the page — the floating FAB at the bottom-right fades out
once the page is within hide-offset px of the bottom,
so the last rows of content stay accessible.
Below is filler so the page actually scrolls; the FAB is fixed-positioned.
- Filler row 1 — scroll down to reach the bottom.
- Filler row 2
- Filler row 3
- Filler row 4
- Filler row 5
- Filler row 6
- Filler row 7
- Filler row 8
- Filler row 9
- Filler row 10 — last one. The FAB should be hidden by now.
Sample usage
<!-- default: medium primary-container -->
<material-fab icon="add" aria-label="Add"></material-fab>
<!-- explicit size + color set -->
<material-fab size="large" variant="tertiary" icon="palette" aria-label="Palette"></material-fab>
<!-- as a link -->
<material-fab href="/new" icon="add" aria-label="New"></material-fab>
<!-- as a popover trigger (e.g. for material-menu) -->
<material-fab popovertarget="my-menu" icon="more_vert" aria-label="More"></material-fab>
<!-- extended: icon + label, pill-shaped; `size` is ignored -->
<material-fab icon="add" label="Compose" aria-label="Compose"></material-fab>