HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Speed DialView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA button that fans out the few actions a screen is for.ExperimentalSince 0.1.0ActionsUsageimport'@fusion.dev/helix/speed-dial'import'@fusion.dev/helix-headless/speed-dial'Preview
API ReferenceRoothelix-speed-dialA button that fans out the few actions a screen is for.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring"Actions"Names the trigger and the set of actions it opens.offsetnumber12Space between the trigger and the actions, in pixels.openbooleanWhether the element is open.placementPlacement"top-end"Which way the actions fan out. They move if that side does not fit.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The actions.triggerThe control that opens it. Falls back to a button named by `label`.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe region the actions are drawn in.triggerThe default trigger, where none was slotted.
CSS PropertyDescription--speed-dial-gapSpace between the actions.
Itemhelix-speed-dial-itemOne action in a speed dial: a mark, and a name beside it.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the action can be chosen.valuestring""What this action stands for, carried in the event when it is chosen.
ReadTypeDescriptionselectedbooleanWhether this is the row the set is on, which here is where focus is.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The action's name.iconThe mark, which is what a dial is read by.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the action is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocus() => voidPuts focus on the control inside, which is what a reader can reach.focusItem() => void`NavigableItem`, so the arrow keys are the shared controller's business.select() => voidChooses the action, which is the same act as pressing it.
PartDescriptioniconThe mark's box.itemThe control.labelThe name beside it.
CSS PropertyDescription--speed-dial-item-sizeEdge length of the mark.
Roothelix-headless-speed-dialA button that fans out the few actions a screen is for.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring"Actions"Names the trigger and the set of actions it opens.offsetnumber12Space between the trigger and the actions, in pixels.openbooleanWhether the element is open.placementPlacement"top-end"Which way the actions fan out. They move if that side does not fit.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The actions.triggerThe control that opens it. Falls back to a button named by `label`.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionactionsThe region the actions are drawn in.triggerThe default trigger, where none was slotted.
Itemhelix-headless-speed-dial-itemOne action in a speed dial: a mark, and a name beside it.
PropTypeDefaultDescriptiondisabledbooleanfalseWhether the action can be chosen.valuestring""What this action stands for, carried in the event when it is chosen.
ReadTypeDescriptionselectedbooleanWhether this is the row the set is on, which here is where focus is.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The action's name.iconThe mark, which is what a dial is read by.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the action is chosen. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptionfocus() => voidPuts focus on the control inside, which is what a reader can reach.focusItem() => void`NavigableItem`, so the arrow keys are the shared controller's business.select() => voidChooses the action, which is the same act as pressing it.
PartDescriptioniconThe mark's box.itemThe control.labelThe name beside it.
ExamplesNameDescriptionEventsA fan of actions that opens, and one of them chosen.PlacedThe actions opening upward and to the side, further from the button that holds them.PreviewA floating action button, and the few actions it fans out.PreviewA floating action button, and the few actions it fans out.