Vitral 0.2
Button

SpeedDial

A floating button that fans its actions out, in a line or around a circle.

WAI-ARIA tested

Import

main.ts
import { SpeedDial } from '@vitral/vue';

Linear

Last action: —
<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const actions: MenuItem[] = [    { label: 'Add', icon: 'plus', command: () => (last.value = 'Add') },    { label: 'Edit', icon: 'pencil', command: () => (last.value = 'Edit') },    { label: 'Copy', icon: 'copy', command: () => (last.value = 'Copy') },    { label: 'Delete', icon: 'trash', command: () => (last.value = 'Delete') }];</script> <template>    <div style="display: flex; gap: 6rem; align-items: center; padding: 11rem 8rem 1rem">        <SpeedDial :model="actions" direction="up" aria-label="Actions (up)" />        <SpeedDial :model="actions" direction="right" aria-label="Actions (right)" severity="secondary" />    </div>    <small style="color: var(--vt-text-muted-color)">Last action: {{ last }}</small></template>

Circle and semi-circle

<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue'; const actions: MenuItem[] = [    { label: 'Add', icon: 'plus' },    { label: 'Edit', icon: 'pencil' },    { label: 'Copy', icon: 'copy' },    { label: 'Delete', icon: 'trash' }];</script> <template>    <div style="display: flex; gap: 12rem; align-items: center; padding: 6rem 7rem">        <SpeedDial :model="actions" type="circle" :radius="80" aria-label="Actions (circle)" severity="help" />        <SpeedDial :model="actions" type="semi-circle" direction="up" :radius="90" hide-icon="close" aria-label="Actions (semi-circle)" severity="success" />    </div></template>

Quarter circle

<script setup lang="ts">import { SpeedDial, type MenuItem } from '@vitral/vue'; const actions: MenuItem[] = [    { label: 'Add', icon: 'plus' },    { label: 'Edit', icon: 'pencil' },    { label: 'Copy', icon: 'copy' },    { label: 'Delete', icon: 'trash' }];</script> <template>    <div style="display: flex; justify-content: flex-end; width: 100%; padding: 7rem 1rem 1rem">        <SpeedDial :model="actions" type="quarter-circle" direction="up-left" :radius="110" aria-label="Actions (quarter)" severity="contrast" />    </div></template>

API

Read from packages/vue/src/components/SpeedDial/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
modelMenuItem[]The actions; each item's `label` names its button and shows as a tooltip.
directionSpeedDialDirectionWhere the actions open. Defaults to `'up'`.
type'linear' | 'circle' | 'semi-circle' | 'quarter-circle'A line (the default), or around a circle, a half or a quarter of one.
radiusnumberThe circle's radius in pixels. Defaults to 20 per action.
showIconIconPropThe button's icon while closed. Defaults to a plus.
hideIconIconPropThe button's icon while open. Without one, the show icon turns.
rotateAnimationbooleanTurn the icon as it opens. Defaults to true.
maskbooleanDim the page behind the open actions.
transitionDelaynumberMilliseconds between one action appearing and the next. Defaults to 30.
hideOnClickOutsidebooleanClose on a press outside. Defaults to true.
ariaLabelstringNames the button.
severitySeverity—
disabledboolean—
tooltipPlacement'top' | 'bottom' | 'left' | 'right'Where the action tooltips appear. Defaults to the side away from the direction.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——
clickevent: MouseEvent—

Slots

NameSlot propsDescription
item(props: { item: MenuItem; index: number })An action's content.
icon(props: { visible: boolean })The button's icon.