Buttons

FAB Menu

Floating action button that expands a small set of related actions.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Properties

Align

Color

Variant

Disabled

Vue

<m-fab-menu
  :items='[{&quot;label&quot;:&quot;Create note&quot;,&quot;icon&quot;:&quot;ic:round-note-add&quot;,&quot;value&quot;:&quot;note&quot;},{&quot;label&quot;:&quot;Upload file&quot;,&quot;icon&quot;:&quot;ic:round-upload&quot;,&quot;value&quot;:&quot;upload&quot;}]'
  align="right"
  color="primary"
  variant="filled"
  :disabled="false"
 />

MFabMenu API

Props, slots, and events are extracted from the current public UI Kit contract.

MFabMenu

Button family

src/runtime/components/ui/fab-menu

Props

NameTypeDefault

colorSemantic Material color role used by the component scheme.

'primary' | 'secondary' | 'tertiary' | 'error''primary'

variantMaterial surface treatment that controls the component emphasis.

'elevated' | 'filled' | 'tonal' | 'outlined' | 'text''filled'

sizeComponent size on the shared small, medium, and large scale.

'sm' | 'md' | 'lg''md'

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

items

MFabMenuItem[]() => []

alignEdge the FAB and its items align to. @default 'right'

'left' | 'right''right'

openIcon

string'asset:ui-test-plus'

closeIcon

string'asset:ui-test-close'

Slots

Events

@selectMFabMenuItem