Speed Dial — cinder playground

Overview

SpeedDial composes a FloatingAction trigger with a directional cluster of quick actions. Use it when one primary floating action needs a small set of related secondary actions.

Usage

<script lang="ts">
  import { SpeedDial } from '@lostgradient/cinder/speed-dial';
</script>

<SpeedDial aria-label="Quick actions">
  {#snippet trigger()}+{/snippet}

  <SpeedDial.Action label="Create" onclick={() => create()}>
    {#snippet icon()}C{/snippet}
  </SpeedDial.Action>
</SpeedDial>

Live preview

When to use

Use when

One primary floating action needs a small set of closely related quick actions.

Avoid when

The actions are equally important and always visible - use toolbar instead. Use Toolbar instead
The trigger should open rich contextual content - use popover instead. Use Popover instead

Examples

Quick actions

A FloatingAction trigger reveals a directional cluster of labeled quick actions.

Directions

Actions can fan out up, down, left, or right from the trigger.

Props

Props for speed-dial
Name	Type	Default	Required	Bindable	Description
`open`	`boolean`	`false`		bind	Bindable open state. Trigger, Escape, outside click, and action activation update it.
`direction`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`			Direction the actions fan out.
`hidden`	`boolean`	`false`			Applies the native hidden attribute and makes the whole control inert.
`trigger`	`snippet`		req		Trigger icon or content rendered inside the FloatingAction.
`children`	`snippet`		req		`SpeedDial.Action` children.