Usage #
Examples #
Basic #
SpeedDial displays related actions from a single trigger button.
Linear #
When type is set to linear (default), items are displayed in a line based on the direction property. The direction can be up, down, left, or right.
Circle #
Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.
Semi Circle #
When type is defined as semi-circle, items are displayed in a half-circle around the button.
Quarter Circle #
Setting type as quarter-circle displays the items at one of four corners of the button based on the direction.
Transition Delay #
The transitionDelay property specifies the delay in milliseconds between each action item's appearance animation.
Template #
SpeedDial supports full customization of the trigger button and action items using the button and item templates.
- Like
- Share
- Print
- Save
- Copy
Tooltip #
SpeedDial can be combined with Tooltip to display labels for action items.
Mask #
Adding mask property displays a modal layer behind the popup items.
Accessibility #
Screen Reader
SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.
The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.
Menu Button Keyboard Support
| Key | Function |
|---|---|
| enter | Toggles the visibility of the menu. |
| space | Toggles the visibility of the menu. |
| down arrow | Opens the menu and moves focus to the first item. |
| up arrow | Opens the menu and moves focus to the last item. |
Menu Keyboard Support
| Key | Function |
|---|---|
| enter | Activates the menuitem, closes the menu and sets focus on the menu button. |
| escape | Closes the menu and sets focus on the menu button. |
| arrow keys | Navigates between the menu items. |
| home | Moves focus to the first item. |
| end | Moves focus to the last item. |