SpeedDial

An unstyled, accessible speed dial component with compound composition.

Build fully custom floating action menus with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use SpeedDial with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Trigger, List, Item, Action
Four layout types: linear, circle, semi-circle, quarter-circle
Eight direction options for linear and radial positioning
Configurable staggered transition delay per item
Auto-close on outside click

Usage#

import { SpeedDial } from 'primereact/speeddial';

<SpeedDial.Root>
    <SpeedDial.Trigger></SpeedDial.Trigger>
    <SpeedDial.List>
        <SpeedDial.Item index={0}>
            <SpeedDial.Action></SpeedDial.Action>
        </SpeedDial.Item>
    </SpeedDial.List>
</SpeedDial.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<SpeedDial.Root as="nav">
    <SpeedDial.Trigger as="div">...</SpeedDial.Trigger>
    <SpeedDial.List as="div">
        <SpeedDial.Item as="div" index={0}>
            <SpeedDial.Action as="a" href="/edit">
                ...
            </SpeedDial.Action>
        </SpeedDial.Item>
    </SpeedDial.List>
</SpeedDial.Root>

Default elements: Root=div, Trigger=button, List=ul, Item=li, Action=button.

Render Function Children#

Item accepts a render function as children, providing access to the component instance.

<SpeedDial.Item index={0}>{(instance) => <button>{instance.speeddial?.state.visible ? 'Open' : 'Closed'}</button>}</SpeedDial.Item>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

SpeedDialRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SpeedDialRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SpeedDialRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SpeedDialRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SpeedDialRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SpeedDialRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`visible`	`boolean`	—
Whether the speeddial is visible or not.
`defaultVisible`	`boolean`	—
Whether the speeddial is visible or not.
`direction`	`"left"` \| `"right"` \| `"up"` \| `"down"` \| `"up-left"` \| `"up-right"` \| `"down-left"` \| `"down-right"`	`up`
Specifies the opening direction of actions.
`transitionDelay`	`number`	`30`
Transition delay step for each action item.
`type`	`"circle"` \| `"linear"` \| `"semi-circle"` \| `"quarter-circle"`	`linear`
Specifies the opening type of actions.
`radius`	`number`	`0`
Radius for *circle types.
`hideOnClickOutside`	`boolean`	`true`
Whether the actions close when clicked outside.
`disabled`	`boolean`	`false`
Whether the component is disabled.
`onVisibleChange`	`(event: SpeedDialRootVisibleChangeEvent) => void`	—
Callback fired when the speeddial's visibility changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"speeddial"`
`data-part`	`"root"`

Defines passthrough(pt) options of SpeedDial component.

label	type	description
root	SpeedDialRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
trigger	SpeedDialRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
list	SpeedDialRootPassThroughType<HTMLAttributes<HTMLUListElement>>	Used to pass attributes to the list's DOM element.
item	SpeedDialRootPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the item's DOM element.
action	SpeedDialRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the action's DOM element.

SpeedDialTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SpeedDialTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SpeedDialTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SpeedDialTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SpeedDialTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SpeedDialTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`iconOnly`	`boolean`	`true`
Whether to show the SpeedDialTrigger with a borderless style.
`rounded`	`boolean`	`true`
Whether to show the SpeedDialTrigger with a rounded style.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"speeddial"`
`data-part`	`"trigger"`
`data-open`	Present when menu is open
`data-closed`	Present when menu is closed

Defines passthrough(pt) options of SpeedDialTrigger component.

label	type	description
root	SpeedDialTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

SpeedDialList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SpeedDialListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SpeedDialListInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SpeedDialListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SpeedDialListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SpeedDialListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"speeddial"`
`data-part`	`"list"`

Defines passthrough(pt) options of SpeedDialList component.

label	type	description
root	SpeedDialListPassThroughType<HTMLAttributes<HTMLUListElement>>	Used to pass attributes to the root's DOM element.

SpeedDialItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SpeedDialItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SpeedDialItemInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SpeedDialItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SpeedDialItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SpeedDialItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"speeddial"`
`data-part`	`"item"`
`data-active`	Present when item is focused

Defines passthrough(pt) options of SpeedDialItem component.

label	type	description
root	SpeedDialItemPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the root's DOM element.

SpeedDialAction#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SpeedDialActionInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SpeedDialActionInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SpeedDialActionInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SpeedDialActionPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SpeedDialActionInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`iconOnly`	`boolean`	`true`
Whether to show the SpeedDialAction with a borderless style.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	`'secondary'`
Severity type of the SpeedDialAction.
`rounded`	`boolean`	`true`
Whether to show the SpeedDialAction with a rounded style.
`size`	`"small"` \| `"large"`	`'small'`
Size of the Button.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"speeddial"`
`data-part`	`"action"`

Defines passthrough(pt) options of SpeedDialAction component.

label	type	description
root	SpeedDialActionPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

The trigger button includes aria-haspopup, aria-expanded, and aria-controls to define the relationship between the button and the popup menu. The popup list uses role="menu" and each action has role="menuitem". Use aria-label on each Action to provide an accessible name.

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.
`right arrow`	Opens the menu and moves focus to the last item.
`left arrow`	Opens the menu and moves focus to the first item.
`escape`	Closes the menu.

Key	Function
`enter`	Activates the menuitem, closes the menu and sets focus on the menu button.
`space`	Activates 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.

SpeedDial

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

SpeedDialRoot#

SpeedDialTrigger#

SpeedDialList#

SpeedDialItem#

SpeedDialAction#

Accessibility#

Menu Button Keyboard Support#

Menu Keyboard Support#

SpeedDial

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

SpeedDialRoot#

SpeedDialTrigger#

SpeedDialList#

SpeedDialItem#

SpeedDialAction#

Accessibility#

Screen Reader#

Menu Button Keyboard Support#

Menu Keyboard Support#