Components
Lexicon components are token-driven, accessible, and framework-aware. Every component consumes design tokens through CSS custom properties, ships with full TypeScript types, and renders valid, semantic HTML.
Primitives
| Component | Description | Key features |
|---|---|---|
| Button | Primary action trigger | 4 variants, 3 sizes, loading state, icon slots |
| Icon Button | Icon-only square button | 4 variants, 3 sizes, compact toolbar use |
| FAB | Floating action button | Circular, elevated, extended variant |
| Button Group | Connected button row | Segmented control, active state |
| Link Button | Link-styled button | Underline on hover, trailing icon |
| Split Button | Action + dropdown trigger | Primary action with alternatives |
| Input | Text entry field | Label, helper, error, success, icon slots |
| Textarea | Multi-line text input | Character counter, resize, error state |
| Select | Native dropdown | Custom chevron, 3 sizes, error state |
| Checkbox | Toggle option | Checked, indeterminate, groups |
| Radio | Exclusive choice | Groups, error state |
| Slider | Range input | Track, thumb, value label |
| Search Input | Search field | Search icon, clear button |
| Number Input | Numeric stepper | Increment/decrement buttons, min/max |
| File Upload | File selector | Drag-and-drop, file preview |
| Card | Content container | 3 variants, sub-components, clickable mode |
| Badge | Status indicator | 5 variants, dot mode, removable |
| Table | Tabular data | Compound pattern, striped, density, sticky header |
| Modal | Dialog overlay | Focus trap, escape dismiss, 4 sizes |
| Tooltip | Contextual hint | 4 positions, configurable delay |
| Avatar | User representation | Image, initials, fallback, status, groups |
| Tabs | Content sections | 3 variants, keyboard navigation |
| Toggle | On/off switch | Switch role, label position, 2 sizes |
| Breadcrumbs | Page trail | Chevron/slash separators, truncation |
| Menu | Dropdown menu | Icons, shortcuts, dividers, destructive |
| Sidebar Nav | Vertical navigation | Sections, badges, active state, icons |
| Pagination | Page controls | Prev/next, ellipsis, active page |
| Stepper | Multi-step indicator | Horizontal/vertical, completed/active/upcoming |
| Bottom Nav | Mobile nav bar | 3–5 items, icon + label |
| Alert | Inline message | 5 variants, dismiss, icon + title + description |
| Banner | Full-width notice | 5 variants, action link, dismiss |
| Toast | Floating notification | 4 variants, auto-dismiss, stacking |
| Empty State | No-data placeholder | Icon, heading, description, CTA |
| Spinner | Loading indicator | 3 sizes, 4 colour variants |
| Progress Bar | Horizontal progress | 4 colours, 3 sizes, indeterminate |
| Progress Ring | Circular progress | Percentage label, indeterminate |
| Skeleton | Content placeholder | Shimmer animation, 5 shapes |
| Status Indicator | Presence dot | Online, away, busy, offline |
| List | Structured vertical list | Icons, secondary text, actions, bordered |
| Accordion | Collapsible sections | Single/multiple mode, keyboard nav |
| Tag / Chip | Category label | 5 variants, rounded, removable, avatar |
| Stat Block | Metric display | Value, label, trend indicator, card mode |
| Key-Value Pair | Labelled data rows | Striped, horizontal layout |
| Timeline | Chronological events | Completed, active, pending dots |
| Drawer | Slide-in panel | Left, right, bottom positions |
| Popover | Floating content panel | Click/hover trigger, 4 positions |
| Context Menu | Right-click menu | Icons, shortcuts, dividers, sub-menus |
| Dropdown Menu | Trigger + action list | Toolbar actions, more-options pattern |
| Command Palette | Search-driven commands | ⌘K activation, grouped, keyboard nav |
| Divider | Content separator | Horizontal, vertical, with text label |
| Grid | Column layout | 12/8/4-column, responsive breakpoints |
| Stack | Flex spacing | Vertical, horizontal, configurable gap |
| Container | Max-width wrapper | Narrow, standard, wide, full |
Data Visualisation
| Component | Description | Key features |
|---|---|---|
| Line Chart | Multi-series trend lines | Axes, grid, dots, tooltip, legend |
| Bar Chart | Vertical bar comparison | Single, grouped, stacked variants |
| Area Chart | Filled trend area | Gradient fill, multi-series |
| Pie / Donut Chart | Proportional segments | Centre label, legend, hover |
| Sparkline | Inline mini chart | Line, area, bar variants |
| Legend | Series colour map | Horizontal, vertical, toggleable |
| Chart Tooltip | Hover data card | Multi-series rows, themed surface |
Chart colour palette
| Series | Light mode | Dark mode |
|---|---|---|
| 1 — Primary | #7C3AED (purple) | #A78BFA |
| 2 — Secondary | #0D9488 (teal) | #5EEAD4 |
| 3 — Tertiary | #EA580C (coral) | #FB923C |
| 4 — Fourth | #DB2777 (pink) | #F472B6 |
| 5 — Fifth | #2563EB (blue) | #60A5FA |
Usage patterns
React
tsx
import { Button, Card, Badge } from '@thepace/lexicon/components';Vanilla HTML
Every component has a corresponding CSS class prefixed with lex-:
html
<button class="lex-button lex-button--primary lex-button--md">Save</button>
<div class="lex-card lex-card--elevated">Content</div>
<span class="lex-badge lex-badge--success">Active</span>Customisation
Override component tokens to restyle without touching markup:
css
:root {
--button-primary-bg: #2563EB;
--button-primary-bg-hover: #1D4ED8;
--card-default-radius: 20px;
}Pro components
Looking for DataTable, Charts, Dashboard layouts, and more? See Pro components for advanced primitives available with a Pro licence.