Source: https://primereact.org/speeddial/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Speed Dial

SpeedDial is a floating button with a popup menu.

Import#

import { SpeedDial } from 'primereact/speeddial';

Copy

Linear#

SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button.

<Toast ref={toast} /> <SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} /> <SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} /> <SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} /> <SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

Copy

Circle#

Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.

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

Copy

Semi Circle#

When type is defined as semi-circle, items are displayed in a half-circle around the button.

<Toast ref={toast} /> <SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} /> <SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} /> <SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} /> <SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

Copy

Quarter Circle#

Setting type as quarter-circle displays the items at one of four corners of a button based on the direction.

<Toast ref={toast} /> <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} /> <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} /> <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} /> <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />

Copy

Tooltip#

Items display a tooltip on hober when a standalone Tooltip is present with a target that matches the items.

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

Copy

Mask#

Adding mask property displays a modal layer behind the popup items.

<Toast ref={toast} /> <SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />

Copy

Custom#

SpeedDial sample with an outlined button, custom icons and transitionDelay.

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

Copy

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" />

Copy

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

Import
Linear
Circle
Semi Circle
Quarter Circle
Tooltip
Mask
Custom
Accessibility

PrimeReact 10.9.7 by PrimeTek