When pressed, a floating action button can display multiple primary actions that can be performed on a page.
import { SpeedDial } from 'primereact/speeddial';
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
<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />
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" />
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
<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
<Toast ref={toast} />
<SpeedDial model={items} direction="up" mask />
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" />
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. |
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" />
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. |
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. |