Speed Dial
A floating action button that reveals a set of actions when triggered.
Installation
pnpm dlx shadcn@latest add @diceui/speed-dialLayout
Import the parts, and compose them together.
import {
SpeedDial,
SpeedDialTrigger,
SpeedDialContent,
SpeedDialItem,
SpeedDialLabel,
SpeedDialAction,
} from "@/components/ui/speed-dial";
return (
<SpeedDial>
<SpeedDialTrigger />
<SpeedDialContent>
<SpeedDialItem>
<SpeedDialLabel />
<SpeedDialAction />
</SpeedDialItem>
</SpeedDialContent>
</SpeedDial>
)Examples
With Labels
Display visible labels next to each action button for better discoverability.
Hover Mode
Set activationMode="hover" on the root component to open the speed dial when hovering over the trigger. The speed dial will automatically close when the mouse leaves. Use the delay prop to control how long to wait before the speed dial opens.
Controlled State
Use the open and onOpenChange props to control the speed dial state programmatically.
Sides
The speed dial can expand in different directions using the side prop.
Fixed Positioning
To position the speed dial at a fixed location in the viewport (e.g., bottom-right corner), apply positioning classes to the SpeedDial root component, not the trigger.
<SpeedDial className="fixed right-4 bottom-4">
<SpeedDialTrigger>
<Plus />
</SpeedDialTrigger>
<SpeedDialContent>
{/* actions */}
</SpeedDialContent>
</SpeedDial>Important: Apply fixed positioning to the SpeedDial root, not the SpeedDialTrigger. This ensures the content stays aligned with the trigger.
Why this matters: The content uses absolute positioning relative to its parent. If you apply fixed to the trigger instead, the content won't be able to position itself correctly relative to the trigger.
// ❌ Incorrect - content won't align properly
<SpeedDial>
<SpeedDialTrigger className="fixed right-4 bottom-4">
<Plus />
</SpeedDialTrigger>
<SpeedDialContent>
{/* actions */}
</SpeedDialContent>
</SpeedDial>
// ✅ Correct - content aligns with trigger
<SpeedDial className="fixed right-4 bottom-4">
<SpeedDialTrigger>
<Plus />
</SpeedDialTrigger>
<SpeedDialContent>
{/* actions */}
</SpeedDialContent>
</SpeedDial>API Reference
SpeedDial
The main container component for the speed dial.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when the speed dial is disabled. |
SpeedDialTrigger
The button that toggles the speed dial open/closed state.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "open" | "closed" |
SpeedDialContent
The container for the action items that appears when the speed dial is open.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "open" | "closed" |
[data-orientation] | "horizontal" | "vertical" |
[data-side] | "top" | "right" | "bottom" | "left" |
| CSS Variable | Description |
|---|---|
--speed-dial-gap | Gap between action items. Defaults to 0.5rem. |
--speed-dial-offset | Offset distance from the trigger. Defaults to 0.5rem. |
--speed-dial-transform-origin | Transform origin for animations based on the side. |
SpeedDialItem
A wrapper for each action and its associated label.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "open" | "closed" |
| CSS Variable | Description |
|---|---|
--speed-dial-animation-duration | Duration of the animation for item appearance. Defaults to 200ms. |
--speed-dial-delay | Animation delay for staggered item appearance. |
--speed-dial-transform-origin | Transform origin for item animations. |
SpeedDialAction
An interactive button within the speed dial that triggers an action.
Prop
Type
SpeedDialLabel
A text label that describes the associated action.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| EnterSpace | When focus is on the trigger, toggles the speed dial open/closed. |
| Escape | Closes the speed dial and returns focus to the trigger. |
| Tab | Moves focus between actions. Closes the speed dial when focus moves out. |
| Shift + Tab | Moves focus to the previous action. Closes the speed dial when focus moves out. |