Fab

Floating action button for the primary action of a screen, optionally extended with a label. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiFab } from '@ziyarago/ui/vue'

Icon only

Vue

<UiFab icon="plus" label="New booking" />

Other icons

Vue

<UiFab icon="message-circle" label="Chat" />

<UiFab icon="phone" label="Call" />

Sizes

Vue

<UiFab icon="plus" label="New booking" size="xs" />

<UiFab icon="plus" label="New booking" size="sm" />

<UiFab icon="plus" label="New booking" size="md" />

<UiFab icon="plus" label="New booking" size="lg" />

<UiFab icon="plus" label="New booking" size="xl" />

API reference

Floating action button for the main action of a screen; extended when a label is given.

Props

PropType and valuesDefaultDescription

iconstring'plus'Icon name.

labelstring—Text next to the icon (extended FAB) and the accessible name.

sizexssmmdlgxl'md'Button height: xs 36px, sm 44px, md 56px, lg 64px, xl 72px.

Events

Vue: @name. React: onName.

clickNative click event.

Notes

Always pass label: it is the accessible name. Without it the button falls back to the icon name as aria-label (for example "plus"), which is rarely a good description.