speed-dial
A FAB that expands to reveal related actions.
SpeedDial is a floating action button that expands to reveal a set of related
actions. Compose the SpeedDialTrigger (the FAB) with
SpeedDialActions / SpeedDialAction (icon buttons). It is
controllable via open / onOpenChange, closes on outside-click / Escape / when
an action fires, and can open on hover.
Installation
pnpm add @fluixi-ui/speed-dial
Usage
import {
SpeedDial, SpeedDialTrigger, SpeedDialActions, SpeedDialAction,
} from '@fluixi-ui/speed-dial';
<SpeedDial direction="up">
<SpeedDialTrigger aria-label="Actions"><PlusIcon /></SpeedDialTrigger>
<SpeedDialActions>
<SpeedDialAction aria-label="Copy" label="Copy"><CopyIcon /></SpeedDialAction>
<SpeedDialAction aria-label="Share" label="Share"><ShareIcon /></SpeedDialAction>
</SpeedDialActions>
</SpeedDial>
Parts & props
| Part | Notable props |
|---|---|
SpeedDial |
open / defaultOpen / onOpenChange, direction (up | down | left | right, default up), openOnHover (open on hover as well as click). |
SpeedDialTrigger |
The FAB — takes every Fab prop. |
SpeedDialActions |
Container the actions fan out into; hidden until open. The actions float bare by default — pass filled to wrap them in a padded surface. |
SpeedDialAction |
An IconButton (all its props) plus a label shown beside it. Closes the dial when activated. |
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.