Speed Dial
Usage
Speed Dial is a floating action button that expands to reveal multiple actions. Perfect for quick access to common actions without cluttering the UI.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind OnSelect handlers for each action to navigate or perform operations.
4. Use a variable (e.g., varSpeedDialOpen) to control visibility.
Actions List
The exported YAML includes an actions list with IDs. In Power Apps:
SpeedDialAction1:
OnSelect: Set(varSpeedDialOpen, false); Navigate(AddScreen)
SpeedDialAction2:
OnSelect: Set(varSpeedDialOpen, false); Navigate(EditScreen)
Expand Direction
- Up: Actions appear above the main button (most common)
- Left: Actions appear to the left
- Right: Actions appear to the right
Behavior
- Close on action: Automatically closes when an action is clicked
- Overlay: Dims the background when open
- Auto close delay: Optionally auto-closes after a delay
Export Modes
- Safe: Main button + 3 actions with basic positioning.
- Advanced: Includes overlay, animation speed, offsets, and label mode (Pro feature).
Accessibility
- Ensure minimum button size of 40x40px for touch targets.
- Provide accessible labels for icon-only actions.
- Use keyboard navigation support when possible.
Best Practices
- Limit to 3-5 actions for usability.
- Use icon-only mode for compact UI.
- Use icon+label mode for clarity.
- Position at bottom-right or bottom-left for mobile-friendly access.