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