	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

SpeedDial

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

SpeedDial Tag Documentation

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

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
ariaLabel	String	false		The aria-label attribute is used to define a string that labels the current element for accessibility.
autoDisplay	boolean	false	true	Defines whether the first level of submenus will be displayed on mouseover or click event.
badge	Object	false		Badge value to display on the button.
buttonStyle	String	false		Inline style of the button element.
buttonStyleClass	String	false		Style class of the button element.
dir	String	false	ltr	Defines text direction, valid values are ltr and rtl.
direction	String	false	up	Specifies the opening direction of actions. Valid values are up, down, left, right, up-left, up-right, down-left and down-right.
disabled	boolean	false	false	Whether the component is disabled.
hideDelay	int	false	0	Delay in milliseconds before hiding the submenu, if 0 not hidden until document.click().
hideIcon	String	false		Icon of the button when speed dial is opened.
hideOnClickOutside	boolean	false	true	Whether the actions close when clicked outside.
keepOpen	boolean	false	false	Whether to keep the speed dial open after clicking an action.
mask	boolean	false	false	Whether to show a mask element behind the speed dial.
maskStyle	String	false		Inline style of the mask element.
maskStyleClass	String	false		Style class of the mask element.
model	MenuModel	false		MenuModel instance to create menus programmatically
onClick	String	false		Client side callback to execute when button is clicked.
onHide	String	false		Client side callback to execute when speed dial is hidden.
onShow	String	false		Client side callback to execute when speed dial is shown.
onVisibleChange	String	false		Client side callback to execute when visibility changes.
radius	int	false	0	Radius for circle types.
rotateAnimation	boolean	false	true	Whether to show rotate animation when button state changes.
showDelay	int	false	0	Delay in milliseconds before displaying the submenu. Default is 0 meaning immediate.
showIcon	String	false	pi pi-plus	Icon of the button when speed dial is closed.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
tabindex	String	false	0	Position of the element in the tabbing order.
title	String	false		Advisory tooltip information.
toggleEvent	String	false		Event to toggle the submenus, valid values are "hover" and "click".
transitionDelay	int	false	30	Transition delay step for each action item.
type	String	false	linear	Specifies the opening type of actions. Valid values are linear, circle, semi-circle and quarter-circle.
visible	boolean	false	false	Specifies the visibility of the overlay.

Name	Description
No records found.

Name	Type	Default	Description
No records found.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
jquery/jquery-plugins.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.SpeedDial

Class org.primefaces.component.speeddial.SpeedDial

Renderer Type org.primefaces.component.SpeedDialRenderer

Renderer Class org.primefaces.component.speeddial.SpeedDialRenderer

RESOURCES

Tag DocumentationNew DocumentationNew Documentation JSDoc


<style>
    .speeddial-linear-demo .ui-speeddial-direction-up {
        left: calc(50% - 2rem);
        bottom: 0;
    }

    .speeddial-linear-demo .ui-speeddial-direction-down {
        left: calc(50% - 2rem);
        top: 0;
    }

    .speeddial-linear-demo .ui-speeddial-direction-left {
        right: 0;
        top: calc(50% - 2rem);
    }

    .speeddial-linear-demo .ui-speeddial-direction-right {
        left: 0;
        top: calc(50% - 2rem);
    }

    .speeddial-circle-demo .ui-speeddial-circle {
        top: calc(50% - 2rem);
        left: calc(50% - 2rem);
    }

    .speeddial-circle-demo .ui-speeddial-semi-circle.ui-speeddial-direction-up {
         left: calc(50% - 2rem);
         bottom: 0;
    }

    .speeddial-circle-demo .ui-speeddial-semi-circle.ui-speeddial-direction-down {
         left: calc(50% - 2rem);
         top: 0;
    }

    .speeddial-circle-demo .ui-speeddial-semi-circle.ui-speeddial-direction-left {
         right: 0;
         top: calc(50% - 2rem);
    }

    .speeddial-circle-demo .ui-speeddial-semi-circle.ui-speeddial-direction-right {
         left: 0;
         top: calc(50% - 2rem);
    }

    .speeddial-circle-demo .ui-speeddial-quarter-circle.ui-speeddial-direction-up-left {
         right: 0;
         bottom: 0;
    }

    .speeddial-circle-demo .ui-speeddial-quarter-circle.ui-speeddial-direction-up-right {
         left: 0;
         bottom: 0;
    }

    .speeddial-circle-demo .ui-speeddial-quarter-circle.ui-speeddial-direction-down-left {
         right: 0;
         top: 0;
    }

    .speeddial-circle-demo .ui-speeddial-quarter-circle.ui-speeddial-direction-down-right {
         left: 0;
         top: 0;
    }

    .speeddial-tooltip-demo .ui-speeddial-direction-up.speeddial-left {
         left: 0;
         bottom: 0;
    }

    .speeddial-tooltip-demo .ui-speeddial-direction-up.speeddial-right {
         right: 0;
         bottom: 0;
    }

    .speeddial-delay-demo .ui-speeddial-direction-up {
        left: calc(50% - 2rem);
        bottom: 0;
    }

    .speeddial-mask-demo .ui-speeddial-direction-up {
        right: 0;
        bottom: 0;
    }

    .speeddial-dynamicitem-demo .ui-speeddial-direction-down {
        left: calc(50% - 2rem);
        top: 0;
    }
</style>


<h:form id="speedDialForm">
    <p:tooltip />
    <p:growl id="messages" showDetail="true"/>

    <div class="card">
        <h5>Linear</h5>
        <div class="speeddial-linear-demo" style="position: relative; height: 500px">
            <p:speedDial direction="up" ariaLabel="SpeedDial Up">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages" ariaLabel="Edit"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial direction="down">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial direction="left">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial direction="right">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>
        </div>
    </div>

    <div class="card">
        <h5>Circle, Semi-Circle and Quarter-Circle</h5>
        <div class="speeddial-circle-demo" style="position: relative; height: 500px">
            <p:speedDial radius="80" type="circle" buttonStyleClass="ui-button-warning">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="80" direction="up" type="semi-circle">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="80" direction="down" type="semi-circle">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="80" direction="left" type="semi-circle">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="80" direction="right" type="semi-circle">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="120" direction="up-left" type="quarter-circle" buttonStyleClass="ui-button-success">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="120" direction="up-right" type="quarter-circle" buttonStyleClass="ui-button-success">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="120" direction="down-left" type="quarter-circle" buttonStyleClass="ui-button-success">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial radius="120" direction="down-right" type="quarter-circle" buttonStyleClass="ui-button-success">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>
        </div>
    </div>

    <div class="card">
        <h5>Tooltip and Keep Open</h5>
        <div class="speeddial-tooltip-demo" style="position: relative; height: 350px">
            <p:speedDial direction="up" styleClass="speeddial-right" buttonStyleClass="ui-button-danger"
                         keepOpen="true">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages" title="Add"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages" title="Update"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages" title="Delete"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple" title="Upload"/>
                <p:menuitem icon="pi pi-external-link" title="PrimeFaces" url="https://www.primefaces.org"/>
            </p:speedDial>

            <p:speedDial direction="up" styleClass="speeddial-left" buttonStyleClass="ui-button-help"
                         keepOpen="true">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages" title="Add"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages" title="Update"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages" title="Delete"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple" title="Upload"/>
                <p:menuitem icon="pi pi-external-link" title="PrimeFaces" url="https://www.primefaces.org"/>
            </p:speedDial>
        </div>
    </div>

    <div class="card">
        <h5>Transition Duration and Icon</h5>
        <div class="speeddial-delay-demo" style="position: relative; height: 350px">
            <p:speedDial direction="up" transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times"
                         buttonStyleClass="ui-button-outlined">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>
        </div>
    </div>

    <div class="card">
        <h5>Mask and No Rotate Animation</h5>
        <div class="speeddial-mask-demo" style="position: relative; height: 350px">
            <p:speedDial direction="up" mask="true" showIcon="pi pi-bars" hideIcon="pi pi-times"
                         rotateAnimation="false">
                <p:menuitem icon="pi pi-pencil" action="#{speedDialView.add}" update="messages"/>
                <p:menuitem icon="pi pi-refresh" action="#{speedDialView.update}" update="messages"/>
                <p:menuitem icon="pi pi-trash" action="#{speedDialView.delete}" update="messages"/>
                <p:menuitem icon="pi pi-upload" outcome="/ui/file/upload/simple"/>
                <p:menuitem icon="pi pi-external-link" url="https://www.primefaces.org"/>
            </p:speedDial>
        </div>
    </div>

    <div class="card">
        <h5>Dynamic Items and Badge</h5>
        <div class="speeddial-dynamicitem-demo" style="position: relative; height: 350px">
            <p:speedDial badge="#{speedDialView.badgeModel}" direction="down" model="#{speedDialView.model}" />
        </div>
    </div>
</h:form>


package org.primefaces.showcase.view.button;

import org.primefaces.model.badge.BadgeModel;
import org.primefaces.model.badge.DefaultBadgeModel;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;

import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;

@Named
@RequestScoped
public class SpeedDialView {

    private MenuModel model;

    private BadgeModel badgeModel;

    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();

        DefaultMenuItem item = DefaultMenuItem.builder()
                .icon("pi pi-pencil")
                .command("#{speedDialView.add}")
                .update("messages")
                .build();
        model.getElements().add(item);

        item = DefaultMenuItem.builder()
                .icon("pi pi-refresh")
                .command("#{speedDialView.update}")
                .update("messages")
                .build();
        model.getElements().add(item);

        item = DefaultMenuItem.builder()
                .icon("pi pi-trash")
                .command("#{speedDialView.delete}")
                .update("messages")
                .build();
        model.getElements().add(item);

        item = DefaultMenuItem.builder()
                .icon("pi pi-upload")
                .outcome("/ui/file/upload/simple")
                .build();
        model.getElements().add(item);

        item = DefaultMenuItem.builder()
                .icon("pi pi-external-link")
                .url("https://www.primefaces.org")
                .build();
        model.getElements().add(item);

        badgeModel = DefaultBadgeModel.builder()
                .value("1")
                .severity("danger")
                .build();
    }

    public MenuModel getModel() {
        return model;
    }

    public BadgeModel getBadgeModel() {
        return badgeModel;
    }

    public void add() {
        addMessage("Add", "Data Added");
    }

    public void update() {
        addMessage("Update", "Data Updated");
    }

    public void delete() {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Delete", "Data Deleted");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public void addMessage(String summary, String detail) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

SpeedDial

SpeedDial Tag Documentation

Linear

Circle, Semi-Circle and Quarter-Circle

Tooltip and Keep Open

Transition Duration and Icon

Mask and No Rotate Animation

Dynamic Items and Badge

Usage

Reloading page