fab
Floating action button — circular, elevated, with sizing and an extended form.
Fab is a circular, elevated Button for the primary action on a
surface. It reuses variant / tone / press state and the active skin's
treatment (Material tonal container + ripple), and adds FAB sizing and an
extended (icon + label) form. Provide an aria-label for the icon-only form.
The FAB is not positioned for you — place it in a fixed / absolute container.
Installation
pnpm add @fluixi-ui/fab
Usage
import { Fab } from '@fluixi-ui/fab';
<Fab aria-label="Add"><PlusIcon /></Fab>
<Fab aria-label="Add" size="lg" tone="primary"><PlusIcon /></Fab>
<Fab extended><PlusIcon /> New item</Fab>
Props
Everything from Button plus:
| Prop | Type | Description |
|---|---|---|
size |
sm | md | lg |
40 / 56 / 64px. Default md. |
extended |
boolean |
Pill holding an icon plus a text label. |
Carries data-fab / data-fab-size / data-fab-extended; owns its size, circular
shape and elevation while inheriting the button's colour, press and ripple.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.