@arterial/fab

Arterial FAB

Another React Material FAB

Installation

npm install @arterial/fab

Usage

Styles

Sass

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

CSS

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

JSX

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

Regular FAB

<Fab icon="favorite" />

Mini FAB

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

Extended FAB

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

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

Other Variants

Trailing Icon

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

Text

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

<Fab extended label="Create" />

Props

Fab

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.