FAB

A Floating Action Button (FAB) performs the primary, or most common, action on a screen.

Basic usage

The FAB comes with three variants: surface, secondary and tertiary.

<FAB icon={<Plus />} />
<FAB icon={<Plus />} variant="secondary" />
<FAB icon={<Plus />} variant="tertiary" />

Extended mode

When you add a children, FAB will behave in extended mode:

<FAB icon={<Plus />}>Add</FAB>

Note: extended mode intentionally does not respect size prop

Sizes

Also FAB can accept a size prop:

<FAB icon={<Plus />} size="small" />
<FAB icon={<Plus />} size="medium" />
<FAB icon={<Plus />} size="large" />