Floating Action — cinder playground

Overview

Circular button representing the single most important action on a screen.

Usage

<script lang="ts">
  import { FloatingAction } from '@lostgradient/cinder/floating-action';
</script>

Guidance

Use When

One action dominates the page purpose (compose, add, create).

Avoid When

Multiple equally-important actions exist — use a toolbar or button group.
You need it pinned to the viewport — it doesn't position itself; wrap it in your own fixed/sticky container.

Live preview

When to use

Use when

One action dominates the page purpose (compose, add, create).

Avoid when

Multiple equally-important actions exist — use a toolbar or button group.
You need it pinned to the viewport — it doesn't position itself; wrap it in your own fixed/sticky container.

Examples

Floating Action Button

A circular primary-action button. Always provide aria-label for icon-only (filled) usage. Wrap in a fixed/sticky container to position it on the page.

Props

Props for floating-action
Name	Type	Default	Required	Description
`shape`	`'filled' \| 'extended'`	`'filled'`		Shape. `filled` = circle, `extended` = pill with icon + label.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`		Size — controls diameter for filled, height for extended.
`variant`	`'primary' \| 'secondary' \| 'surface'`	`'primary'`		Color palette (primary, secondary, or surface).
`disabled`	`boolean`	`false`		When true, disables the button and prevents interaction.
`children`	`snippet`			The icon (or icon + label for extended shape). Always provide `aria-label` when the floating action renders an icon without visible text — i.e. the `filled` shape.
`href`	`discriminated-union`
`tabindex`	`unknown`		req
`onclick`	`unknown`		req