Speed Dial

When pressed, a floating action button can display multiple primary actions that can be performed on a page.

Import#


import { SpeedDial } from 'primereact/speeddial';

Linear#

When pressed, a floating action button can display multiple primary actions that can be performed on a page. It has a collection of additional options defined by the model property. SpeedDial's position is calculated according to the container element with the position type style.


<Toast ref={toast} />
<SpeedDial model={items} direction="up" />
<SpeedDial model={items} direction="down" />
<SpeedDial model={items} direction="left" />
<SpeedDial model={items} direction="right" />

Circle#

Circle


<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />

Semi Circle#

Semi-Circle


<Toast ref={toast}
<SpeedDial model={items} radius={80} direction="up" type="semi-circle" />
<SpeedDial model={items} radius={80} direction="down" type="semi-circle" />
<SpeedDial model={items} radius={80} direction="left" type="semi-circle" />
<SpeedDial model={items} radius={80} direction="right" type="semi-circle" />

Quarter Circle#

Circle, Semi-Circle and Quarter-Circle


<Toast ref={toast} />
<SpeedDial model={items} radius={120} direction="up-left" type="quarter-circle" buttonClassName="p-button-success" />
<SpeedDial model={items} radius={120} direction="up-right" type="quarter-circle" buttonClassName="p-button-success" />
<SpeedDial model={items} radius={120} direction="down-left" type="quarter-circle" buttonClassName="p-button-success" />
<SpeedDial model={items} radius={120} direction="down-right" type="quarter-circle" buttonClassName="p-button-success" />

Tooltip#

Tooltip


<Toast ref={toast} />
<Tooltip target=".speeddial-tooltip-demo .speeddial-right .p-speeddial-action" position="left" />
<SpeedDial model={items} direction="up" className="speeddial-right" buttonClassName="p-button-danger" />

<Tooltip target=".speeddial-tooltip-demo .speeddial-left .p-speeddial-action" />
<SpeedDial model={items} direction="up" className="speeddial-left" buttonClassName="p-button-help" />

Mask#

Mask


<Toast ref={toast} />
<SpeedDial model={items} direction="up" mask />

Custom#

Transition Duration, Icon and No Rotate Animation


<Toast ref={toast} />
<SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-speeddial	Container element.
p-speeddial-button	Button element of speeddial.
p-speeddial-mask	Mask element of speeddial.
p-speeddial-list	List of the actions.
p-speeddial-item	Each action item of list.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.


<SpeedDial aria-label="Options" />

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	Actives 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.

API#

Visit the API documentation for detailed information about all the properties, events and methods of the component.

Speed Dial