@arterial/fab NPM

Arterial FAB

npm install @arterial/fab

@use "@material/fab/index.scss" as fab;
@include fab.core-styles;

import '@material/fab/dist/mdc.fab.css';

import {Fab} from '@arterial/fab';

<Fab icon="favorite" />

A mini FAB should be used on smaller screens. Mini FABs can also be used to create visual continuity with other screen elements.

<Fab icon="favorite" mini />

The extended FAB is wider, and it includes a text label.

<Fab extended icon="add" label="Create" />

<Fab extended label="Create" trailingIcon="add" />

Unlike standard FABs, extended FABs don't require an icon.

<Fab extended label="Create" />

Name	Type	Description
className	string	Classes to be applied to the root element.
exited	boolean	Animates FAB out of view.
extended	boolean	Enables a extended variant.
icon	string \| node	Icon to render within root element.
label	string	Text to be displayed within the root element.
outlined	boolean	Enables an outlined variant.
mini	boolean	Enables a mini variant.
ripple	boolean	Enables ripple within root element. Defaults to true.
tag	string \| object	HTML tag to be applied to the root element. Defaults to button.
trailingIcon	string \| node	Icon to render on the right side of the root element.