Extended FAB

Extended floating action buttons (extended FABs) help people take primary actions

Use an extended FAB on screens with long, scrolling views that require persistent access to an action, such as a checkout screen.

Use it when label text helps understand the main action, or to add further emphasis to the button.

Import

import { ExtendedFAB } from "@m3-components/solid";

Basic Style

import { AddIcon } from "your-components";

<ExtendedFAB text="Add" position="unset">
	<AddIcon />
</ExtendedFAB>

Size

There are three types of extended FABs: small, medium, and large.

import { AddIcon } from "your-components";

<ExtendedFAB text="Add" size="small" position="unset" client:load>
    <AddIcon />
</ExtendedFAB>
<ExtendedFAB text="Add" size="medium" position="unset" client:load>
    <AddIcon />
</ExtendedFAB>
<ExtendedFAB text="Add" size="large" position="unset" client:load>
    <AddIcon />
</ExtendedFAB>

Positioning

By default, the extended FAB button will be fixed to the bottom-right corner of the screen with a margin of 16px.

import { AddIcon } from "your-components";

<ExtendedFAB text="Add">
	<AddIcon />
</ExtendedFAB>;