FAB
A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the Material Design 3 specification and supports four color roles and two variants.
Usage
A FAB represents the primary action on a screen. Use it for the most important action a user can take.
<wc-fab><wc-icon name="add"></wc-icon></wc-fab>
The extended FAB displays a text label alongside the icon by setting the label attribute.
<wc-fab label="Create"><wc-icon name="add"></wc-icon></wc-fab>
Variants
The FAB supports four colors (surface, primary, secondary, tertiary) and two variants (tonal, filled).
<wc-fab color="surface" variant="tonal"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab color="primary" variant="tonal"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab color="secondary" variant="tonal"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab color="tertiary" variant="tonal"><wc-icon name="add"></wc-icon></wc-fab>
Use variant="filled" for higher-emphasis FABs with the selected color role.
<wc-fab label="Compose" color="primary" variant="filled"><wc-icon name="edit"></wc-icon></wc-fab>
<wc-fab label="Create" color="secondary" variant="filled"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab label="Share" color="tertiary" variant="filled"><wc-icon name="share"></wc-icon></wc-fab>
Use lowered to reduce the elevation when the FAB is in a scrolled or resting state.
<wc-fab color="surface" variant="tonal" lowered="true"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab color="primary" variant="filled" label="Lowered" lowered="true"><wc-icon name="add"></wc-icon></wc-fab>
Sizes
The FAB comes in three sizes: small (40dp), standard (56dp), and large (96dp).
<wc-fab size="sm"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab size="lg"><wc-icon name="add"></wc-icon></wc-fab>
Extended FABs with different sizes.
<wc-fab size="sm" label="Small"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab label="Standard"><wc-icon name="add"></wc-icon></wc-fab>
<wc-fab size="lg" label="Large"><wc-icon name="add"></wc-icon></wc-fab>
On this page
FAB
Usage Variants Sizes