Fab
Fab — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
Fab — Prism component.
Accessibility
Fully keyboard operable: Tab to focus, Enter/Space to activate. The visible focus ring uses --focus-ring — never remove it. Provide an accessible label (aria-label) for icon-only controls.
Import
const { Fab } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "accent" | "neutral" | "positive" | "negative" | — | Fill colour. accent (default), neutral, or semantic positive/negative. |
size | "sm" | "md" | "lg" | — | |
icon | React.ReactNode | — | The icon node (Lucide <svg>). |
label | React.ReactNode | — | Optional text — present = extended (pill) FAB. |
isDisabled | boolean | — | |
onPress | (e: React.MouseEvent) => void | — | REQUIRED when there is no visible label. |
onClick | (e: React.MouseEvent) => void | — | |
className | string | — |