Vuance UI Kit

Buttons

Floating action button

Keep a screen-level primary action visible above the surrounding content.

Anatomy

Callouts are measured from the live FAB below.

  1. 1

    Container

    The floating, elevated surface. Its size and corner shape come from the size prop.

  2. 2

    Elevation & state layer

    A resting shadow lifts the FAB above content; hover, focus, and pressed feedback are painted on the container.

  3. 3

    Icon

    The single glyph. It is decorative — the accessible name comes from aria-label.

  4. 4

    Accessible name

    aria-label names the action; an icon-only FAB is unlabelled without it.

Sizes

Three sizes trade footprint for prominence; the container and icon scale together.

sm
md
lg
01

sm — small

A compact FAB for secondary surfaces or when space is tight.

02

md — default

The standard screen-level primary action.

03

lg — large

A prominent action on spacious layouts, e.g. an empty state or a wide canvas.

Interactive configuration

Adjust the primary props and choose coherent slot presets.

  • Props stay atomic

    Independent primitive values use individual controls.

  • Slots use presets

    Related slot combinations switch as one preset without invalid states.

Properties

Variant

Size

Slots

Slots

Disabled

States

The FAB resolves the full M3 state scheme, including elevation changes.

Rest

Resting elevation

A shadow lifts the FAB above the content beneath it.

Pointer

Hover / pressed

The elevation and a state layer respond to pointer interaction.

Keyboard

Focus-visible

A visible ring marks keyboard focus without removing the shadow.

Unavailable

Disabled

Interaction and elevation are removed while the icon stays in place.

Async

Loading

loading swaps the icon for a spinner and exposes aria-busy.

In context

The component is shown in a working composition built from public kit primitives.