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" />