DDS/Components/Floating Action Button

Floating Action Button

Layout

Floating Action Button (FAB). Supports a speed dial mode with animated secondary actions.

Props

Prop	Type	Default	Description
`label`	`string`	`"Open actions"`	Aria-label for the button.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	`"bottom-right"`	Position in the corner.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Button size.
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`"primary"`	Visual style.
`actions`	`DsFabAction[]`	`[]`	Speed dial actions (empty = emits click).
`fixed`	`boolean`	`true`	Fixed position (vs. absolute).

Examples

Simple

vue

<DsFloatingActionButton label="Create" variant="primary" />

Speed dial

vue

<DsFloatingActionButton
  label="Open actions"
  :actions="[
    { id: 'edit', label: 'Edit', icon: '...' },
    { id: 'share', label: 'Share', icon: '...' },
  ]"
/>

Variants & sizes

Skeleton

Use DsFloatingActionButtonSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsFloatingActionButtonSkeleton />

Accessibility

aria-label describes the main action.
aria-expanded indicates the open state of the speed dial.
Secondary actions each have their own aria-label.

VerticalNav

Resizable