Speed Dial

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

Linear

Circle, Semi-Circle and Quarter-Circle

Tooltip

Transition Duration, Icon and No Rotate Animation

Mask

Import via Module


import { SpeedDial } from 'primereact/speeddial';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/speeddial/speeddial.min.js"></script>

Getting Started

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.


export const SpeedDialDemo = () => {

    const items = [
        {
            label: 'Add',
            icon: 'pi pi-pencil',
            command: () => {
                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
            }
        },
        {
            label: 'Update',
            icon: 'pi pi-refresh',
            command: () => {
                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
            }
        },
        {
            label: 'Delete',
            icon: 'pi pi-trash',
            command: () => {
                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
            }
        }
    ];

    return (
        <SpeedDial model={items} />
    );
}

MenuModel API

SpeedDial uses the common MenuModel API to define the items, visit MenuModel API for details.

Type

SpeedDial has 4 types; linear, circle, semi-circle and quarter-circle.

Direction

Specifies the opening direction of actions. For the linear and semi-circle types; up, down, left and right. For the quarter-circle type; up-left, up-right, down-left and down-right.

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
model	object	null	MenuModel instance to define the action items.
visible	boolean	false	Specifies the visibility of the overlay.
className	string	null	Style class of the element.
style	object	null	Inline style of the element.
direction	string	up	Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'
transitionDelay	number	30	Transition delay step for each action item.
type	string	linear	Specifies the opening type of actions.
radius	number	0	Radius for *circle types.
mask	boolean	false	Whether to show a mask element behind the speeddial
disabled	boolean	false	Whether the component is disabled.
hideOnClickOutside	boolean	true	Whether the actions close when clicked outside.
buttonClassName	string	null	Style class of the button element.
buttonStyle	object	null	Inline style of the button element.
buttonTemplate	any	null	Template of button element.
maskClassName	string	null	Style class of the mask element.
maskStyle	object	null	Inline style of the mask element.
showIcon	string	pi pi-plus	Show icon of the button element.
hideIcon	string	null	Hide icon of the button element.
rotateAnimation	boolean	true	Defined to rotate showIcon when hideIcon is not present.

Events

Name	Parameters	Description
onVisibleChange	visible: Whether the actions are visible.	Fired when the visibility of element changed.
onClick	event: Browser event.	Fired when the button element clicked.
onShow	-	Fired when the actions are visible.
onHide	-	Fired when the actions are hidden.

Styling

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.