DEVELOPMENT PREVIEWIn development

Fab

A Button pinned to a screen corner via position: fixed — every Button variant, size, hotkey and asChild polymorphism, just floating above page content instead of sitting in flow.

Try it

Scroll this card — the two Fabs below are pinned to this preview panel's corners for the demo (in a real page they pin to the viewport).

Page content
Snippet
import { Fab } from '@creo-team/buzz-ui/client'

// Classic circular FAB, bottom-right by default
<Fab aria-label="Add" iconOnly>+</Fab>

// Extended pill — icon + label children instead of iconOnly
<Fab aria-label="Compose" variant="outline">✎ Compose</Fab>

Position

Five fixed positions. bottom-center/top-center center without using transform, so they don't fight Button's own hover-lift/press-scale animations.

bottom-rightbottom-leftbottom-centertop-righttop-left
Snippet
<Fab aria-label="Add" position="bottom-left">+</Fab>

// Distance from the viewport edge — default 24px
<Fab aria-label="Add" offset={40}>+</Fab>

Every Button feature, floating

Fab wraps Button directly — variants, sizes, loading, hotkey and asChild all just work.

Snippet
// A keyboard shortcut that also floats
<Fab aria-label="New note" hotkey="mod+j">+</Fab>

// asChild — a framework link styled and positioned as a Fab
<Fab asChild aria-label="Compose">
	<Link href="/compose">✎</Link>
</Fab>