HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Speed DialView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA floating button that opens a short list of the main actions on a screen.StableSince 0.1.0ActionsUsageimport'@fusion.dev/helix/speed-dial'import'@fusion.dev/helix-headless/speed-dial'Preview
API ReferenceRoothelix-speed-dialA floating button that opens a short list of the main actions on a screen.
PropTypeDescriptiondefaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.labelstringDefault"Actions"Accessible name for the trigger and the set of actions it opens.labels"hover"When the actions' names show. Unset, always, beside each action. hover
shows a name only while its action is under the pointer or has focus, as
a tooltip does, for a dial whose icons speak for themselves. The names stay
the actions' accessible names either way.longPressLabelstringDefault"Long press or press Alt+Down to show the actions"The description the trigger gives under open-on="long-press", saying how
its actions are reached.offsetnumberDefault12Space between the trigger and the actions, in pixels.openbooleanWhether the element is open.openOn"click"|"hover"|"long-press"Default"click"What opens the dial. click opens it on a press of the trigger. hover
also opens it while a mouse rests on the trigger, and closes it once the
mouse has left. Under long-press, a press is the trigger's own action,
and the dial opens on a press held for half a second, or on Alt+Down or
Alt+Up.placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"top-end"The direction the actions open in. They move to another side if that side
does not fit.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The actions.iconReplaces the plus on the button the dial draws when no trigger is slotted, such as with a pencil for a dial of ways to write.triggerThe control that opens the actions. Without one, a button named by label is drawn.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe actions are about to close. Cancelable: cancel it to keep them open.helix-before-openHelixBeforeOpenEventThe actions are about to open. Cancelable: cancel it to keep them closed.helix-selectHelixSelectEventAn action was chosen. The action sends the event, and the dial closes after it. Cancelable: cancel it to keep the dial open.toggleToggleEventThe dial opened or closed. The event carries newState and oldState.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts focus on the trigger, the slotted one or the button drawn in its
place, as a focus() on a native control would. The host itself takes no
focus, so a page focusing it after a dialog closes landed nowhere.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe region the actions are drawn in.triggerThe default trigger, drawn when none is slotted.
CSS PropertyDescription--speed-dial-background-colorFill of the trigger the dial draws when none is slotted.--speed-dial-colorColor of that trigger's icon.--speed-dial-gapSpace between the actions.--speed-dial-shadowShadow under that trigger at rest.--speed-dial-sizeWidth and height of that trigger.--speed-dial-staggerThe wait between one action arriving and the next.--speed-dial-travelHow far each action moves as it arrives.
Custom stateDescriptionopenWhile the actions are out.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-speed-dial-groupA named set of actions inside a speed dial, set apart from the rest.
PropTypeDescriptionlabelstringDefault""The group's name, drawn above its actions and read by screen readers.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The group's actions.labelThe group's name, for content richer than the label text.
PartDescriptiongroupThe set, which carries the group role.labelThe group's name, drawn above its actions while there is one.
CSS PropertyDescription--speed-dial-group-label-colorColor of the group's name.--speed-dial-group-label-font-sizeSize of the group's name.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-speed-dial-itemOne action in a speed dial: an icon and a name beside it.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the action is disabled, so it cannot be chosen.downloadbooleanDefaultfalseWhether the link downloads the file when the action is chosen. Only
meaningful beside an href, and only for a file served from the page's
origin.hrefstringDefault""The URL the action links to. Setting it draws the action as a link.relstringDefault""The link's rel. Set it whenever you set target="_blank".shortcutstringDefault""The action's keyboard shortcut as a chord, such as mod+s, carried as
aria-keyshortcuts and drawn after the name. mod is Command on an Apple
keyboard and Control elsewhere. Showing a shortcut does not bind it.targetstringDefault""Where the link opens, such as _blank for a new tab.valuestringDefault""The action's value, sent in helix-select when the action is chosen.
ReadTypeDescriptionactivebooleanWhether the action has focus, which makes it the action the keyboard is on.selectedbooleanWhether the action has focus, the same as active.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The action's name.iconThe action's icon, the main way the action is recognized.shortcutThe action's keyboard shortcut, drawn after its name, such as a Kbd. It replaces the text drawn for shortcut, and is hidden from the name, which aria-keyshortcuts carries instead.
EventTypeDescriptionhelix-selectHelixSelectEventThe action was chosen. Cancelable: cancel it to keep the dial open.
MethodTypeDescriptionclick() => voidPresses the action, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
chooses the action and follows its link, once.focus(options: FocusOptions) => voidPuts focus on the control inside the item.focusItem() => voidMoves focus to the action. Part of NavigableItem, which the shared
keyboard controller uses for the arrow keys.select() => voidChooses the action, the same as pressing it.
PartDescriptioniconThe box that holds the icon.itemThe control for the action, which is an <a> where href is set.labelThe action's name, beside the icon.shortcutThe box after the name that holds the shortcut, shown while shortcut is set or something is in the shortcut slot.
CSS PropertyDescription--speed-dial-item-background-colorFill of the round icon.--speed-dial-item-colorColor of the icon.--speed-dial-item-disabled-opacityHow faint a disabled action is drawn.--speed-dial-item-hover-background-colorFill of the round icon under the pointer.--speed-dial-item-sizeEdge length of the icon.--speed-dial-label-background-colorFill of the chip holding the action's name.--speed-dial-label-colorColor of the action's name.--speed-dial-label-font-sizeSize of the action's name.--speed-dial-shortcut-colorColor of the shortcut drawn after the action's name.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-speed-dialA floating button that opens a short list of the main actions on a screen.
PropTypeDescriptiondefaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.labelstringDefault"Actions"Accessible name for the trigger and the set of actions it opens.longPressLabelstringDefault"Long press or press Alt+Down to show the actions"The description the trigger gives under open-on="long-press", saying how
its actions are reached.offsetnumberDefault12Space between the trigger and the actions, in pixels.openbooleanWhether the element is open.openOn"click"|"hover"|"long-press"Default"click"What opens the dial. click opens it on a press of the trigger. hover
also opens it while a mouse rests on the trigger, and closes it once the
mouse has left. Under long-press, a press is the trigger's own action,
and the dial opens on a press held for half a second, or on Alt+Down or
Alt+Up.placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"top-end"The direction the actions open in. They move to another side if that side
does not fit.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The actions.iconReplaces the plus on the button the dial draws when no trigger is slotted, such as with a pencil for a dial of ways to write.triggerThe control that opens the actions. Without one, a button named by label is drawn.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe actions are about to close. Cancelable: cancel it to keep them open.helix-before-openHelixBeforeOpenEventThe actions are about to open. Cancelable: cancel it to keep them closed.helix-selectHelixSelectEventAn action was chosen. The action sends the event, and the dial closes after it. Cancelable: cancel it to keep the dial open.toggleToggleEventThe dial opened or closed. The event carries newState and oldState.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts focus on the trigger, the slotted one or the button drawn in its
place, as a focus() on a native control would. The host itself takes no
focus, so a page focusing it after a dialog closes landed nowhere.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe region the actions are drawn in.triggerThe default trigger, drawn when none is slotted.
Custom stateDescriptionopenWhile the actions are out.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-headless-speed-dial-groupA named set of actions inside a speed dial, set apart from the rest.
PropTypeDescriptionlabelstringDefault""The group's name, drawn above its actions and read by screen readers.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The group's actions.labelThe group's name, for content richer than the label text.
PartDescriptiongroupThe set, which carries the group role.labelThe group's name, drawn above its actions while there is one.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-headless-speed-dial-itemOne action in a speed dial: an icon and a name beside it.
PropTypeDescriptiondisabledbooleanDefaultfalseWhether the action is disabled, so it cannot be chosen.downloadbooleanDefaultfalseWhether the link downloads the file when the action is chosen. Only
meaningful beside an href, and only for a file served from the page's
origin.hrefstringDefault""The URL the action links to. Setting it draws the action as a link.relstringDefault""The link's rel. Set it whenever you set target="_blank".shortcutstringDefault""The action's keyboard shortcut as a chord, such as mod+s, carried as
aria-keyshortcuts and drawn after the name. mod is Command on an Apple
keyboard and Control elsewhere. Showing a shortcut does not bind it.targetstringDefault""Where the link opens, such as _blank for a new tab.valuestringDefault""The action's value, sent in helix-select when the action is chosen.
ReadTypeDescriptionactivebooleanWhether the action has focus, which makes it the action the keyboard is on.selectedbooleanWhether the action has focus, the same as active.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The action's name.iconThe action's icon, the main way the action is recognized.shortcutThe action's keyboard shortcut, drawn after its name, such as a Kbd. It replaces the text drawn for shortcut, and is hidden from the name, which aria-keyshortcuts carries instead.
EventTypeDescriptionhelix-selectHelixSelectEventThe action was chosen. Cancelable: cancel it to keep the dial open.
MethodTypeDescriptionclick() => voidPresses the action, as click() presses a native button: passed to the
control inside, which is what answers a click, so a script's click()
chooses the action and follows its link, once.focus(options: FocusOptions) => voidPuts focus on the control inside the item.focusItem() => voidMoves focus to the action. Part of NavigableItem, which the shared
keyboard controller uses for the arrow keys.select() => voidChooses the action, the same as pressing it.
PartDescriptioniconThe box that holds the icon.itemThe control for the action, which is an <a> where href is set.labelThe action's name, beside the icon.shortcutThe box after the name that holds the shortcut, shown while shortcut is set or something is in the shortcut slot.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionEventsThe events a speed dial sends as it opens, as an action is chosen, and as it closes.PlacementThe actions opening above the button and aligned to its start edge, with a larger offset.PreviewA floating action button and the actions it opens.PreviewA floating action button and the actions it opens.