FAB

Material Design 3 floating action button (FAB) web component.

3.1 KB gzipped
@lit-material/fab 0.0.3
Renders on the server

Example

Install

npm install @lit-material/fab @lit-material/tokens

import "@lit-material/fab";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-fab>`

Material Design 3 floating action button (FAB) — the primary action for a screen, built on the same button/ripple/focus-ring/form-association pattern as lit-material-button and lit-material-icon-button.

Properties

Property	Attribute	Type	Default	Description
`size`	`size`	`FabSize`	`"regular"`
`color`	`color`	`FabColor`	`"primary"`
`extended`	`extended`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`type`	`type`	`FabType`	`"button"`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`""`
`form`	`form`	`string \| undefined`	none
`href`	`href`	`string`	`""`	If set, renders the FAB as a link (`<a>`) instead of a `<button>`.
`target`	`target`	`string`	`""`
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control. Required unless `extended`'s visible label is enough on its own.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Slots

Slot	Description
`icon`	The action's icon.
default	The label text, shown only while `extended` is set.

CSS parts

Part	Description
`button`	The native `<button>` or `<a>` element.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.

Source on GitHub npm