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.

dowe
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.

dowe
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.

dowe
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 data

There 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 data

There are no records to display