Other

Fab

Floating action button fixed to a viewport corner (or rendered inline with position="static"). Provide a label (extended mode) or an aria-label so it always has an accessible name.

Import

import { Fab } from "@zephora/react";

Examples

Sizes

The demos use `position="static"` so the button stays in the canvas; by default it floats at the bottom-end of the viewport.

<Fab icon={<PlusIcon />} aria-label="Create" size="sm" position="static" />
<Fab icon={<PlusIcon />} aria-label="Create" size="md" position="static" />
<Fab icon={<PlusIcon />} aria-label="Create" size="lg" position="static" />

Extended and colors

Passing `label` switches to extended mode and names the button.

<Fab icon={<PlusIcon />} label="New task" position="static" />
<Fab icon={<PlusIcon />} label="Delete" color="danger" position="static" />
<Fab icon={<PlusIcon />} aria-label="More" color="neutral" position="static" />

Floating placement

In an app you would omit `position` (defaults to "bottom-end") and tune the viewport gap with `offset`.

Imagine this box is the viewport

// Floats at the bottom-end viewport corner, 32px from the edges.
<Fab icon={<PlusIcon />} aria-label="Compose" position="bottom-end" offset={32} />

API

Fab props

Prop	Type	Default	Description
`icon` *	`ReactNode`	—	Icon rendered inside the button.
`label`	`string`	—	Extended mode — shows the label next to the icon and names the button.
`position`	`"bottom-end" \| "bottom-start" \| "top-end" \| "top-start" \| "static"`	`"bottom-end"`	Where the button floats. "static" opts out of fixed positioning.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Diameter scale.
`color`	`"primary" \| "danger" \| "neutral"`	`"primary"`	Semantic color.
`offset`	`number`	`24`	Distance in px from the viewport edges (floating positions only).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button props (onClick, disabled…) are forwarded.