Build · New

FAB

A floating action button for the most important action on a screen, in the bottom inline-end corner: bottom-left in Arabic. One per screen, and it can open a menu of quick actions.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/fab

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

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

<Fab label="New transaction" className="fixed bottom-24 end-24" onClick={create} />

Examples

Sizes

sm 56 (default), md 80 and lg 96px. extended shows the label next to the icon; without it, label is the name screen readers announce.

States

Hover lifts it with a larger shadow, pressing darkens it, and keyboard focus adds the ring and keeps the shadow. There's no disabled state: if the action isn't available, don't show the FAB.

API reference

Fab

Any other Base UI Button prop passes through (onClick…).

Prop	Type	Default	Description
`label`	`string`		Required. Figma's Label: the visible text with `extended`, the screen-reader name without it.
`extended`	`boolean`	`false`	Figma's Extended FAB.
`icon`	`IconComponent`	`PlusIcon`	Figma's Icon leading. Directional icons flip in Arabic.
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Figma's Size: 56, 80 and 96px.
`render`	`ReactElement`		A link with the FAB look; it keeps its semantics.
`className`	`string`		Placement: `fixed bottom-24 end-24` for the bottom inline-end corner.

FabMenu, FabMenuItem

Prop	Type	Default	Description
`label`	`string`		Required. The name of the FAB that opens the menu (“Quick actions”); it stays the same while open.
`icon`	`IconComponent`	`PlusIcon`	The FAB's icon while closed; it becomes X while open.
`open / defaultOpen / onOpenChange`	`boolean / (open) => void`		The open state.
`className`	`string`		Placement, as on `Fab`.
`FabMenuItem: children, icon, onClick`	`ReactNode, IconComponent, (event) => void`		The action's label, icon and handler; the menu then closes.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Reaches the FAB like any button; its focus order is where it sits in the code.
`EnterSpace`	Runs the action, or opens the menu and focuses the first action.
`ArrowDownArrowUp`	In the menu: moves between the actions.
`Escape`	Closes the menu and returns focus to the FAB.

ARIA

An icon-only FAB takes label as its name; an extended one is named by its text.
The menu FAB carries aria-haspopup="menu" and aria-expanded; its name stays the same when it shows X, so the announcement doesn't change.
A fixed FAB covers content: leave room at the bottom of the page for the FAB and its inset so it never hides the last item.

Arabic and RTL notes

Mirrors

Placement is logical: end-24 puts the FAB at the bottom-left in Arabic.
Menu actions line up at the inline end, on the left above the FAB in Arabic, with the icon before the text on the right.

Does not mirror

Plus, X and the pencil don't mirror; the shadow is vertical only.

Numerals: FABs rarely hold numbers; if an action's label has one, format it with formatNumber.
Arabic typography: Labels are body-16, body-18 and body-20 Semibold by size, at fixed heights that fit Arabic.
Mixed-direction text: A Latin name at the end of an Arabic action (“مسح رمز QR”) renders correctly; in the middle, wrap it in <bdi>.

All components ›

FAB