SpeedDial

A floating action button that expands to reveal a set of related actions.

ExamplesCodeUsageChangelog

Basic usage

The default SpeedDial is fixed to the bottom-right corner of the page and expands upward.

Edit

Share

Delete

Tailwind v4

<SpeedDial>
  <SpeedDialAction label="Edit">
    <template #icon>✏️</template>
  </SpeedDialAction>
  <SpeedDialAction label="Share">
    <template #icon>🔗</template>
  </SpeedDialAction>
  <SpeedDialAction label="Delete">
    <template #icon>🗑️</template>
  </SpeedDialAction>
</SpeedDial>

Direction: down

Actions expand downward from the FAB.

New file

New folder

Upload

Tailwind v4

<SpeedDial direction="down" icon="+">
  <SpeedDialAction label="New file">
    <template #icon>📄</template>
  </SpeedDialAction>
  <SpeedDialAction label="New folder">
    <template #icon>📁</template>
  </SpeedDialAction>
  <SpeedDialAction label="Upload">
    <template #icon>⬆️</template>
  </SpeedDialAction>
</SpeedDial>

Direction: left

Actions expand to the left of the FAB.

Copy

Cut

Paste

Tailwind v4

<SpeedDial direction="left" icon="≡">
  <SpeedDialAction label="Copy">
    <template #icon>📋</template>
  </SpeedDialAction>
  <SpeedDialAction label="Cut">
    <template #icon>✂️</template>
  </SpeedDialAction>
  <SpeedDialAction label="Paste">
    <template #icon>📌</template>
  </SpeedDialAction>
</SpeedDial>

Direction: right

Actions expand to the right of the FAB.

Bold

Italic

Link

Tailwind v4

<SpeedDial direction="right" icon="+">
  <SpeedDialAction label="Bold">
    <template #icon>B</template>
  </SpeedDialAction>
  <SpeedDialAction label="Italic">
    <template #icon>I</template>
  </SpeedDialAction>
  <SpeedDialAction label="Link">
    <template #icon>🔗</template>
  </SpeedDialAction>
</SpeedDial>

Fixed positioning

Use type="fixed" (the default) to pin the SpeedDial to a corner of the viewport. The placement prop controls which corner.

<!-- Fixed to bottom-right (default) -->
<SpeedDial type="fixed" placement="bottom-right">
  ...
</SpeedDial>

<!-- Fixed to bottom-left -->
<SpeedDial type="fixed" placement="bottom-left">
  ...
</SpeedDial>

<!-- Fixed to top-right -->
<SpeedDial type="fixed" placement="top-right">
  ...
</SpeedDial>

SpeedDial Props

Prop	Type	Default	Description
icon	string	'+'	Icon or text shown on the main FAB button
placement	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'	Corner to pin to (applies when type="fixed")
direction	'up' | 'down' | 'left' | 'right'	'up'	Direction actions expand from the FAB
type	'fixed' | 'relative'	'fixed'	fixed pins to viewport; relative positions within parent

SpeedDialAction Props

Prop	Type	Default	Description
label	string	required	Accessible label and default tooltip text
tooltip	string	same as label	Custom tooltip text override

SpeedDialAction Slots

Slot	Description
icon	Icon content rendered inside the action button

Keyboard

• Escape — closes the SpeedDial when open
• Clicking outside the component closes it