Actions

SpeedDialAction

Quick-action leaf for SpeedDial that closes the owning dial after activation.

import { SpeedDialAction } from '@lostgradient/cinder/speed-dial-action';
actionfloating
01

Overview

SpeedDialAction is the SpeedDial.Action leaf. It must be rendered inside a SpeedDial parent so it can participate in roving keyboard navigation and close the owning dial after activation.

Usage

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

<SpeedDial aria-label="Quick actions">
  {#snippet trigger()}+{/snippet}
  <SpeedDial.Action label="Create">
    {#snippet icon()}C{/snippet}
  </SpeedDial.Action>
</SpeedDial>
02

When to use

Use when
  • Rendering a secondary quick action inside SpeedDial.
Avoid when
03

Props

Props for speed-dial-action
NameTypeDefaultDescription
id text
label required text Visible and accessible label for the action.
icon required snippet Icon or compact content rendered inside the action button.
onclick (event: MouseEvent) => void Called when the action is activated. The SpeedDial closes afterward.
disabled boolean false Disables the action and removes it from roving keyboard navigation.
labelPlacement 'auto' | 'start' | 'end' | 'none' 'auto' Placement of the visible label relative to the action button.