Speed Dial

Floating action button that fans out a set of secondary actions on click.

Up direction

Click the FAB to expand the fan.

<wr-speed-dial [actions]="actions" (pick)="onPick($event)" />

API

NameDescriptionTypeDefault
actionsreadonly WrSpeedDialAction[][]
triggerLabelAccessible name of the trigger. Falls back to speedDial.label, then 'Actions' — the trigger is icon-only, so without this it has no name at all.string | nullnull
directionDirection the actions fan out.WrSpeedDialDirection'up'
openTwo-way bindable open state.booleanfalse
iconIcon for the main trigger button.WrIconName'add'
disabledDisable interaction.booleanfalse
safeAreaPad the host toward the dial direction with env(safe-area-inset-*). Only matters when the consumer pins the dial to that edge of the viewport; otherwise it has no effect.booleanfalse
(pick)Fires when the user picks one of the actions.WrSpeedDialAction

Types

Data shapes used by the inputs and outputs above.

interface WrSpeedDialAction {
  id: string;
  label: string;
  icon?: WrIconName;
}
NameDescriptionTypeDefault
WrSpeedDialActionPer-button action shown when the dial expands.interface
idrequiredStable identifier for the action.string
labelrequiredTooltip / accessible label.string
iconButton icon.WrIconName

CSS variables

Custom properties ngwr/speed-dial publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

VariableDefaultDeclared on
--wr-speed-dial-action-size2.5rem.wr-speed-dial
--wr-speed-dial-gap0.625rem.wr-speed-dial
--wr-speed-dial-size3.25rem.wr-speed-dial