Actions

SpeedDial

A round button that fans out a few quick actions.

Features5

API

Theming

Basic

Click the button or press an arrow key on it. Each action is named by its label, shown in a tooltip.

Directions

direction sets where a linear dial opens; the arrow keys follow it.

11 lines

<div class="stage">  @for (direction of directions; track direction.value) {    <tx-speed-dial      size="small"      [class]="direction.value"      [direction]="direction.value"      [ariaLabel]="'Actions, opens ' + direction.value"      [model]="items"    />  }</div>

Circles

type lays the actions on a circle, a semi-circle facing the direction, or a quarter-circle for corners; radius sets the distance.

23 lines

<div class="stage">  <div class="cell center">    <tx-speed-dial type="circle" ariaLabel="Circle" [radius]="80" [model]="items" />  </div>  <div class="cell bottom">    <tx-speed-dial      type="semi-circle"      direction="up"      ariaLabel="Semi-circle"      [radius]="80"      [model]="items"    />  </div>  <div class="cell corner">    <tx-speed-dial      type="quarter-circle"      direction="up-left"      ariaLabel="Quarter-circle"      [radius]="100"      [model]="items"    />  </div></div>

Mask

mask dims the page while the actions are open; hideIcon swaps the icon instead of turning it.

Design tokens

dt changes the spacing and timing of one dial.

9 lines

<div class="stage">  <tx-speed-dial    direction="right"    ariaLabel="Format"    itemSeverity="primary"    [model]="items"    [dt]="{ root: { gap: '4px', duration: '0.4s', stagger: '60ms' } }"  /></div>