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
Name
Type
Default
Description
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.