docs / sula / sula-fab
SulaFab
a speed dial whose actions are liquid beads: each necks off the trigger, travels to its slot on a thinning thread, and settles. it collapses to a plain stacked menu under reduced motion.
intensity · assertsrsc · client
provenance
authored in usvalayer
sulaintensity
asserts · one per region. it is the focal pointcomposition
the page's one primary action with a few close relativesactions with href render as real anchors when the action navigatesnot for toolbars or a dozen commands. a plain menu reads fasterone sula per region. it never shares a corner with SulaNava11y
the trigger carriesaria-expanded and aria-haspopup · closed actions are inert · open focuses the first action, Escape returns focus to the triggerjest-axedependencies
motion · ogl · sula-core and sula-motion from the same packagelive demo · try it out
customize
labelthe trigger's accessible name
layoutstack along a line or fan an arc
directionwhich way a line opens
tooltipPositiontooltip side; auto is left for lines, top for arcs
gapedge gap in px between trigger and beads
fluidoff renders the plain stacked menu
shine0 matte glass, 1 full neon rim
usage
import { SulaFab } from "@usva-ui/react/sula/sula-fab";
<SulaFab
label="Create"
actions={actions}
/>props
| prop | type | default | notes |
|---|---|---|---|
| actions | SulaFabAction[] | — | { icon, label, onClick?, href? } each. beads are icon-only; the label is the accessible name and the tooltip. |
| icon | ReactNode | a plus | the trigger glyph. |
| label | string | "Actions" | the trigger's accessible name. |
| open / defaultOpen | boolean | false | controlled and uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | fires on toggle, Escape, or an action. |
| layout | "line" | "arc" | "line" | line stacks the beads along direction; arc fans them upward. |
| direction | "up" | "down" | "left" | "right" | "up" | which way a line layout opens. |
| tooltipPosition | "left" | "right" | "top" | — | where action tooltips sit. left for line, top for arc. |
| gap | number | 12 | constant edge gap in px between trigger and beads. raise it for touch. |
| fluid | boolean | true | false renders a plain stacked menu and mounts no canvas. |
| backdrop / tint / accentColor | string | — | the glass palette. default to the bg, surface-2 and accent tokens. |
| shine | number | per backdrop | 0 is flat matte glass, 1 is the full neon rim. |
get it
bun add @usva-ui/reactusage
import { SulaFab } from "@usva-ui/react/sula/sula-fab";
<SulaFab
label="Create"
actions={[
{ icon: <PlusIcon />, label: "New note", onClick: newNote },
{ icon: <MailIcon />, label: "Message", href: "/compose" },
]}
/>