Vuance UI Kit

Buttons

Extended FAB

Make a primary floating action explicit with a visible label.

Anatomy

Callouts are measured from the live extended FAB below.

  1. 1

    Container

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

  2. 2

    Leading icon

    An optional glyph from the prepend slot, sitting before the label.

  3. 3

    Label

    The visible text — and, unlike a plain FAB, the accessible name; no aria-label needed.

  4. 4

    Elevation & state layer

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

Sizes

Three sizes trade footprint for prominence; height, icon, and label scale together.

sm
md
lg
01

sm — small

A compact extended FAB for secondary surfaces or tight layouts.

02

md — default

The standard screen-level primary action with a label.

03

lg — large

A prominent labelled action on spacious layouts.

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 extended FAB resolves the full M3 state scheme, including elevation.

Rest

Resting elevation

A shadow lifts the labelled action 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 label stays readable.

Async

Loading

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

In context

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