One trigger, focused choices
A FAB without actions runs onClick. When actions exist, the trigger opens and closes the action list while still allowing onClick.
CONTROL
Fab
Fab keeps a primary action within reach while optional secondary actions stay out of the way.
PLAYGROUND
Open the page actions
Use the fixed FAB in the lower-right corner. It stays outside the scrolling page flow, and its trigger expands an ordered list of direct fabAction children.
One trigger, focused choices
A FAB without actions runs onClick. When actions exist, the trigger opens and closes the action list while still allowing onClick.
Fab position:"bottom-right" fixed:true icon:"plus" label:"Open page actions" scheme:"primary"
fabAction label:"View Button" icon:"link" href:"/docs/views/control/button" scheme:"info"
fabAction label:"View Slider" icon:"settings" href:"/docs/views/form/slider" scheme:"success"PLACEMENT
Pin the action to a corner
position chooses a viewport corner. fixed keeps the action available during scrolling; offsetX and offsetY use the Dowe spacing scale.
BOTTOM-RIGHT
Default placement
Use the default corner for a primary action that should remain available without competing with page content.
TOP-LEFT
Explicit placement
Choose another corner deliberately when it avoids navigation, media controls, or safe-area content.
Fab position:"top-left" fixed:true offsetX:6 offsetY:6 icon:"settings" label:"Open settings"APPEARANCE
A compact, intentional trigger
Fab supports solid and soft variants, every action scheme, and five square control sizes. Expanded actions use fully tappable intrinsic-width capsules, while the complete trigger circle accepts input and rotates its plus into a dismiss mark on web, Android, and iOS.
SOLID
Strong primary action
Use solid when the action is the clearest next step in the current screen.
SOFT
Lower visual emphasis
Use soft when the action remains convenient but should defer to page content.
Fab variant:"soft" scheme:"secondary" size:"md" icon:"edit" label:"Create note"CONTRACT
Direct actions only
Fab accepts zero or more direct fabAction children. Each action needs a static label plus href or onClick.
STRUCTURE
Ordered actions
Keep fabAction nodes directly inside Fab. Other child components are rejected.
NAVIGATION
Routes or HTTPS
href follows the shared Dowe navigation policy for internal paths and HTTPS URLs.
TARGETS
One source model
Dowe lowers the trigger and action list to matching web, Android, and iOS controls.
API
Fab props
Fab also accepts the applicable common spacing, sizing, visibility, and style props.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||
API
fabAction props
fabAction is a structural child, not a standalone component. Declare href or onClick for every action.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||