Home / Components / fab

FabAndroid

Liquid-glass floating action button — glass disc or filled pill, extended label mode, auto-async loading swap, mount pop

$ npx lumioui add fab

import { Fab } from "@/components/ui/fab/fab";

Props11

icon	React.ReactNode	Icon rendered inside the button.
extended?	boolean	Extended pill variant: icon + label.
label?	string	Label shown when `extended` is true.
size?	"sm" \| "md"	Footprint: "md" (56pt, the Material default) or "sm" (44pt mini for dense toolbars / secondary surfaces).
position?	"bottom-right" \| "bottom-left" \| "none"	Position helper. "bottom-right" (default) applies absolute placement above the home indicator; "none" leaves placement to you.
haptic?	"light" \| "medium" \| "heavy" \| false	Haptic style on press. Default "medium"; false to disable.
loading?	boolean	Crossfade to a spinner and block presses while true.
glass?	boolean	iOS 26 liquid-glass surface — the button floats as a glass disc over content instead of a filled primary blob.
asyncTracking?	boolean	Auto-track async onPress — when onPress returns a Promise, the button automatically enters loading state until it resolves. Default true.
onPress?	(e: GestureResponderEvent) => void \| Promise<unknown>	Called on press. May return a Promise — tracked by asyncTracking.
className?	string

Fab — Extendedextended.tsx

fab/variants/extended.tsx open

Liquid-glass floating action button — glass disc or filled pill, extended label mode, auto-async loading swap, mount pop

import { FabExtended } from "@/components/ui/fab/variants/extended";

export function Example() {
  return (
    <FabExtended />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Fab } from "../fab";
import { Icon } from "../../icon/icon";

/** FabExtended — labeled FAB; the label can carry the payload (order total). */
export function FabExtended() {
  const [ordering, setOrdering] = React.useState(false);
  const placeOrder = () => {
    setOrdering(true);
    setTimeout(() => setOrdering(false), 1800);
  };
  return (
    <View className="w-full items-center py-6">
      <Fab
        position="none"
        extended
        label={ordering ? "Placing order…" : "Order $24.50"}
        loading={ordering}
        onPress={placeOrder}
        icon={<Icon name="shopping-cart" size="md" color="primaryForeground" />}
      />
    </View>
  );
}

Fab — Glass discglass.tsx

fab/variants/glass.tsx open

Liquid-glass floating action button — glass disc or filled pill, extended label mode, auto-async loading swap, mount pop

import { FabGlass } from "@/components/ui/fab/variants/glass";

export function Example() {
  return (
    <FabGlass />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Fab } from "../fab";
import { Icon } from "../../icon/icon";
import { Ambient } from "../../glass/ambient";

/** FabGlass — the action floats as a liquid-glass disc over the feed. */
export function FabGlass() {
  return (
    <View className="relative h-[420px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="fab" />
      <Fab
        glass
        icon={<Icon name="plus" size="lg" color="foreground" />}
        accessibilityLabel="Add photo"
      />
    </View>
  );
}

Fab — Quick Actionsquick-actions.tsx

fab/variants/quick-actions.tsx open

Liquid-glass floating action button — glass disc or filled pill, extended label mode, auto-async loading swap, mount pop

import { FabQuickActions } from "@/components/ui/fab/variants/quick-actions";

export function Example() {
  return (
    <FabQuickActions />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Fab } from "../fab";
import { Icon } from "../../icon/icon";

/** FabQuickActions — circular FABs incl. disabled state. */
export function FabQuickActions() {
  return (
    <View className="w-full flex-row items-center justify-center gap-3 py-6">
      <Fab position="none" glass onPress={() => {}} accessibilityLabel="Add a dish" icon={<Icon name="plus" size="md" color="foreground" />} />
      <Fab position="none" glass onPress={() => {}} accessibilityLabel="Message the kitchen" icon={<Icon name="message-circle" size="md" color="foreground" />} />
      <Fab position="none" glass disabled accessibilityLabel="Schedule pickup (unavailable)" icon={<Icon name="clock" size="md" color="foreground" />} />
    </View>
  );
}