SpeedDial

FAB with fan-out actions

A floating button that fans out a few (two to five) creation actions on a phone screen — new message, new photo. On wide screens, put the actions in the page instead.

Basic

<script setup lang="ts">
import { BlessSpeedDial, useToast } from "blessing-ui";
const { toast } = useToast();
const actions = [
  { label: "New post", value: "post", icon: "✎" },
  { label: "Upload", value: "up", icon: "⇪", color: "accent" as const },
  { label: "Delete", value: "del", icon: "×", color: "danger" as const },
];
</script>

<template>
  <div class="row" style="gap: 48px; align-items: flex-end; min-height: 200px">
    <BlessSpeedDial :actions inline @select="toast($event.label)" />
    <BlessSpeedDial :actions direction="right" color="text" inline @select="toast($event.label)" />
  </div>
</template>

• The button says whether it's open; the actions are hidden (inert) until it is. Esc closes it and returns focus to the button, and so does leaving it with Tab.
• Each action needs a label: it names the button and shows as its tip. direction sets which way they fan; inline renders it in place.

Usage

import { BlessSpeedDial } from "blessing-ui";

API

Props

Name	Type	Default	Description
actions*	BlessSpeedDialAction[]	—
direction	"left" | "right" | "down" | "up"	"up"
label	string	"Actions"
color	"text" | "accent"	"text"
inline	boolean	—	render in place instead of fixed bottom-right
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]
select	[action: BlessSpeedDialAction]

Slots

Name	Scope	Description
icon	—
action	{ action: BlessSpeedDialAction; }