Mushilu-San UI Floating action button
A round or extended button that floats over the page for the main action of a screen.
Selector: mui-fab
import { Fab } from '@mushilu-san/ui/mobile';Loading example…
Overview
label is required: it is the accessible name, and it is shown as text when extended is on. variant and size set the look.
loading while the action runs. The button stays in the tab order, gets aria-busy="true" and ignores clicks. disabled uses aria-disabled instead of removing focus.
When to use
One primary action per screen, such as "Compose" or "Add item". A screen where the main action should stay visible while scrolling.
When not to use
Several equal actions. Use buttons in the page. Use Button instead.
Guidelines
Do
Use an icon and a verb label, such as "Compose". Use the extended form when the action needs a word to be understood.
Don't
Do not place a FAB over content the user needs to read.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
button | button (native) | aria-label from label when not extended. aria-busy while loading, aria-disabled when disabled. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| EnterSpace |
The icon is decorative. The label is the only name, so keep it meaningful.
API
Fab
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'surface' | 'primary' | Visual style. |
size | 'sm' | 'md' | 'lg' | 'md' | Size: sm = 40px, md = 56px (default), lg = 96px. |
label | string | — | Accessible label — always required; shown as visible text when extended. |
extended | boolean | false | Show label text alongside the icon (extended FAB pattern). Accepts attribute presence, e.g. <… extended>. |
disabled | boolean | false | Disables the button. Sets `aria-disabled` and ignores clicks. Accepts attribute presence, e.g. <… disabled>. |
loading | boolean | false | Shows a spinner and sets `aria-busy`. Clicks are ignored while loading. Accepts attribute presence, e.g. <… loading>. |
| Name | Type | Description |
|---|---|---|
clicked | MouseEvent | Emits the native click event unless the button is disabled or loading. |
CSS parts
::part(button)::part(icon)::part(label)::part(root)
Tokens
--mui-color-primary--mui-color-primary-text--mui-shadow-4--mui-radius-full--mui-color-focus-ring--mui-touch-target