FAB
A pill-shaped floating action button with optional leading icon, label, and trailing icon
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Fab } from "@tessinaui/ui";<Fab label="Create" leadingIcon={<Plus />} />Examples
Default
A pill-shaped FAB with a leading icon and label.
Variants
Four visual styles — primary, secondary, ghost, and outline.
Intents
Semantic color intents — none, error, warning, success, and info.
Sizes
Five sizes from compact xs to hero-scale xl.
States
Default, loading (spinner replaces the leading icon), and disabled.
On Color
Placed on a colored Surface, FABs adopt the on-color tone automatically.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label text |
variant | "primary" | "secondary" | "ghost" | "outline" | "primary" | Visual style variant |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Semantic color intent |
tone | "default" | "on-color" | "default" | Surface context — use on-color when placing on a colored background |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the button |
leadingIcon | React.ReactNode | — | Icon rendered before the label; replaced by a spinner when loading |
trailingIcon | React.ReactNode | — | Icon rendered after the label; hidden when loading |
loading | boolean | false | Shows a spinner in place of the leading icon and disables the button |
disabled | boolean | false | Disables the button |
dir | "ltr" | "rtl" | "ltr" | Text direction — RTL reverses icon/label order via CSS flex |
aria-label | string | — | Accessible label (required when no visible label is provided) |
onClick | MouseEventHandler | — | Click handler |
Supported Combinations
| Variant | Intents |
|---|---|
primary | all |
secondary | all |
outline | none, error |
ghost | none |
Sizes
| Size | Height | Use case |
|---|---|---|
xs | 32px | Compact toolbars |
sm | 40px | Secondary actions |
md | 48px | Default, most use cases |
lg | 56px | Prominent actions |
xl | 96px | Hero / landing page CTAs |
Tone
The tone prop controls how the button looks on different surfaces:
default— standard surfaces (white/gray background)on-color— colored backgrounds (brand, error, etc.). Primary becomes a dark pill; secondary/outline become light pills.
Accessibility
The FAB component:
- Requires
aria-labelwhen used without a visible label focus-visible:ring-2focus ring meets WCAG 2.1 AA- Touch targets ≥ 44×44px for md/lg/xl; xs/sm meet minimum via content padding
loadingsetsaria-busy="true"and disables the buttondisabledsetspointer-events-noneanddisabledattribute- RTL fully supported via the
dirprop
EmptyState
Centered surface for "no data here" — empty lists, search results, tables, dashboards, inboxes, 404s, first-run / onboarding moments. Three variants, four sizes, six intents tinting the icon tile, primary + secondary actions, optional footer, LTR/RTL.
Field
A text input field with a label, helper text, FieldDropdown prefix, Button suffix, leading/trailing icon buttons, a clearable button, and a character counter. Supports all intent states and full RTL layout.