ComponentsAction Blocks
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 />} />Showcase
All variants, intents, sizes, tones, and states:
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
Split Button
A compound button with a primary action and a dropdown trigger for secondary options
Dropdown Menu
A contextual menu that opens from a trigger, built on Radix UI. Supports grouped items, leading/trailing icons, keyboard shortcuts, descriptions, submenus, checkboxes, radio groups, and full RTL layout.