Components
66 documented components across 6 categories.55 have Beta React implementations with live previews.
Layer 4 Industry Systems components (Banking and future industries) are grouped separately — see Industries.
Button
Style (Primary/Secondary/Danger) × Size (Small/Medium/Large) × State (Default/Hover/Pressed/Focused/Disabled) — 45 variants
Icon Button
Style × Size × State — 45 variants
Link
Style × Size × State — 45 variants
Button Group
Style × Count (2/3/4) — 9 Figma variants; React uses children + divider chrome
Toggle Group
Single selection · Size sm/md/lg · Orientation horizontal/vertical — React-first (no Figma master yet)
Split Button
Style × Size — 9 variants
Text Input
State × Size — 15 variants
Textarea
State × Size — 15 variants
Checkbox
Value (Unchecked/Checked/Indeterminate) × State — 12 variants
Radio
Value (Unselected/Selected) × State — 8 variants
Switch
Value (Off/On) × State — 8 variants
Select
State × Size — 15 variants
Validation Message
Type (Error/Warning/Success/Info) — 4 variants
Form Field
State (Default/Error) — composition wrapper
Radio Group
Group label + options — single selection
Search Field
State × Size — 12 variants
Slider
State (Default/Hover/Focused/Disabled) — 4 variants
Combobox
State × Size — 15 variants (Figma); Beta React supports default, error, and disabled
Date Picker
State × Size — 5 variants
File Upload
State (Empty/Dragging/Filled/Error/Disabled) — 5 variants
Credit Card Field
State (Default/Focused/Error/Disabled) — 4 variants
Phone Number Field
State (Default/Focused/Error/Disabled) — 4 variants
Number Input
State via Form Field (default/error/disabled/readOnly) — React-first (no Figma master yet)
Breadcrumb
Composed from Breadcrumb Item states — Default/Hover/Current
Pagination
Composed from Page Item states — Default/Hover/Current/Disabled
Tabs
State × Size — 15 variants
Breadcrumb Item
State (Default/Hover/Current) — 3 variants
Page Item
State (Default/Hover/Current/Disabled) — 4 variants
Step Item
State (Completed/Current/Upcoming) — 3 variants
Stepper
Composed from Step children — state (Completed/Current/Upcoming) derived from position, not a component variant
Menu
Placement (bottom default) · Item states (Default/Hover/Disabled/Destructive)
Menu Item
State (Default/Hover/Selected/Disabled) — 4 variants
Dropdown Trigger
State — 4 variants
Sidebar Nav Item
State (Default/Hover/Active/Disabled) — 4 variants
Top Nav Item
State (Default/Hover/Active/Disabled) — 4 variants
Badge
Style × Size — React: neutral/info/success/warning/error × sm/md/lg (no Primary; Figma has Primary × Small/Medium)
Alert
Type (Info/Success/Warning/Error) — 4 variants
Toast
Type — 4 variants
Progress Bar
Style (Default/Success/Warning/Danger) — 4 variants
Spinner
Size (Small/Medium/Large) — 3 variants
Tooltip
Position (Top/Bottom/Left/Right) — 4 variants
Skeleton
Shape (Text/Circle/Rectangle) — 3 variants
Avatar
Size (Small/Medium/Large) — 3 variants
Divider
Orientation (Horizontal/Vertical) — 2 variants
Tag
Single component
List Item
State (Default/Hover) — 2 variants
Table
Compound semantic foundation — no density/sort/selection variants in Beta
Data Table
Sortable header building block — no density/selection/sticky variants in Beta
Empty State
Single component
Tree Item
State (Default/Hover/Selected) — 3 variants
Tree View
Composed from Tree Item rows — no top-level variants of its own
Bar Chart
Single component — no variants
Line Chart
Single component — no variants
Timeline Item
State (Default/Highlighted) — 2 variants
Timeline
Composed from Timeline Item rows — no top-level variants of its own
Calendar Grid
Single-date or range month view — composed from Calendar Day
Calendar Day
State (Default/Today/Selected/Disabled/Outside) — 5 variants