Actions

Speed dial

Themed floating action button that fans out a cluster of secondary actions on activation.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjSpeedDialComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

direction

position

actions

trigger variant

disabled

open on hover

<kj-speed-dial
  kjDirection="up"
  kjPosition="static"
>
  <kj-speed-dial-trigger kjVariant="default" kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>
  <kj-speed-dial-actions>
    <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
    <kj-speed-dial-action kjAriaLabel="Share">S</kj-speed-dial-action>
    <kj-speed-dial-action kjAriaLabel="Delete">D</kj-speed-dial-action>
  </kj-speed-dial-actions>
</kj-speed-dial>