Components

Speed Dial

A floating action button that expands to reveal labelled actions.

php artisan blatui:add speed-dial

{{-- Click the FAB to reveal the actions. Rendered in-flow in a tall card so the
     expansion is visible inside the preview (in real use, pin it `fixed`). --}}
<div class="bg-muted/30 relative flex h-72 items-end justify-center rounded-lg border p-6">
    <x-ui.speed-dial
        :open="false"
        :actions="[
            ['icon' => 'share-2', 'label' => 'Share', 'href' => '#'],
            ['icon' => 'pencil', 'label' => 'Edit'],
            ['icon' => 'trash-2', 'label' => 'Delete'],
        ]"
    />
</div>

Open

{{-- Starts expanded (`:open="true"`) so the action buttons and label pills are
     visible at a glance. Toggle, Escape, or a click outside collapses it. --}}
<div class="bg-muted/30 relative flex h-80 items-end justify-center rounded-lg border p-6">
    <x-ui.speed-dial
        :open="true"
        :actions="[
            ['icon' => 'share-2', 'label' => 'Share', 'href' => '#'],
            ['icon' => 'pencil', 'label' => 'Edit'],
            ['icon' => 'trash-2', 'label' => 'Delete'],
        ]"
    />
</div>

API Reference

Props, slots and exposed methods for <x-ui.speed-dial>.

Props

Prop	Type	Default	Description
`actions`*	`array`	`[]`	The action buttons revealed when the dial expands, stacked in order from the main FAB. See Each action below.
`direction`	`string`	`'up'`	Which way the actions stack from the floating action button. `up` `down`
`open`	`bool`	`false`	Start the dial expanded. Useful for previews or always-open dials; otherwise it opens on click.
`icon`	`string`	`'plus'`	Lucide icon name for the main FAB. Rotates ~45 degrees while the dial is open.
`label`	`string`	`'Open actions'`	Accessible label for the main floating action button.

* Required.

Each action

Prop	Type	Default	Description
`icon`	`string`	—	Lucide icon name shown inside the round action button.
`label`	`string`	—	Accessible name and the text shown in the label pill beside the button. Falls back to "Action N" if omitted.
`href`	`string`	—	Link target. When set the action renders as an <a>; otherwise it is a <button>.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`toggle()`	Toggles the dial open or closed.
`close()`	Closes the dial (also triggered by Escape, click-outside, and selecting an action).