Floating Action Button

Use GdsFab for the single primary action on a screen - create, compose, or add. It floats above content and should stay scarce: one FAB per view, not a toolbar of them.

What GDS provides

Prop	GDS values	Notes
`variant`	`extended`, `circular`	Default is `extended` (label + optional icon)
`size`	`large`, `medium`, `small`	Default is `large`
`color`	`default`, `primary`	Other MUI colors are not supported

Shadow uses theme.gds.core.shadow.bottomM. Pass icons as plain children (MUI pattern).

Accessibility

Circular (icon-only) FABs must include an aria-label. Extended FABs can rely on their visible label.

import { AddIcon } from "@granicus/gds-core/AddIcon";
import { GdsFab } from "@granicus/gds-core/GdsFab";
 
<GdsFab color="primary" variant="circular" aria-label="Add">
  <AddIcon />
</GdsFab>

Basic

A primary extended FAB with a short label.

Variant

extended for a labeled action; circular for a compact icon-only control.

Size

Extended FAB sizes use Body 1 Bold (large) and Body 2 Bold (medium, small). Container min dimensions: large 93 × 48 px, medium 83 × 40 px, small 69 × 32 px. Circular FAB sizes are 56 × 56 px (large), 48 × 48 px (medium), and 40 × 40 px (small).