Badge
Inline status indicator. The canonical atom — every variant rendered.
All variants
defaultsecondaryoutlinedestructivesuccesswarningdanger
With content
ActivePending reviewv1.0.0
Tier 1 — Atoms
Atoms showcase
Every zero-composition primitive from @stackmates/ui-interactive/atoms rendered in the paper design language. An atom owns a single primitive and composes nothing — if it renders here, it ships.
Display atoms plus a small client island for Input, Checkbox, Toggle, Slider, and Popover. Remaining deferred surfaces need table/form context (TableCell, RowCheckbox, TextareaRx), alternate wrappers (CheckboxTW, SwitchRx, Collapsible, ThemeToggle), or are dev-only utilities (ThemeProvider, IslandBoundary, PropsTable, MermaidCodeBlock).
§01
Badges
Inline status indicators. The canonical atom is Badge — shown first and most thoroughly.
SimpleBadge
Lightweight ring-bordered badge plus SimpleDot — five semantic variants.
SimpleBadge variants
successwarningerrorinfoneutral
SimpleDot
StatusBadge
Badge with semantic status color and icon across seven workflow states.
Status states
IdlePendingProcessingSuccessWarningErrorInfo
RoleBadge
Stakeholder role indicator for CRM — six buying-committee roles.
Stakeholder roles
ChampionEconomic BuyerTechnicalLegalProcurementEnd User
AISuggestedBadge
Marks AI-originated content — four provenance variants.
AI provenance
AI GeneratedAI SuggestedAI EnhancedAuto-filled
§01
Actions
Elements that trigger an action.
Button
Triggers an action. Six variants, four sizes.
Variants
Sizes
Disabled
ButtonGroup
Joins related buttons into one segmented control.
Grouped buttons
§01
Brand & identity
Logo and user identity primitives.
Logo
The Stackmates brand mark — three sizes.
Sizes
AvatarRx
User avatar with fallback initials when no image is set.
Fallback initials
SMNVAI
§01
Surfaces
Containers that group content.
Card
Self-contained content block — header, title, description, content.
Pipeline summary
Last 30 days of activity.
Cards group one question or task. Border, no shadow inside the canvas.
Separator
A divider between groups of content.
Above the lineBelow the line
§01
Feedback & status
Loading, progress, and error signals.
Spinner
Indeterminate loading indicator.
Default
Loading...
Skeleton
Loading placeholder that mirrors final content shape.
ProgressStateful
Progress bar with an idle/active/complete/error state machine.
In progress...45%
Complete!100%
Failed70%
ErrorMessage
Field-level or inline error text with danger styling.
This field is required.
EmptyStateIllustration
No-data placeholder illustration — variant per domain entity.
§01
Data display
Read-only renderers for metrics, prices, and key-value pairs.
StatRow
One labelled key-value statistic in a row.
Total deals142
Win rate38%
Avg. cycle21 days
PriceDisplay
Formatted monetary amount with currency presets.
Amounts
$12.99$0.50$0.00
CostDisplay
USD cost with optional input/output token breakdown for AI usage.
Cost with tokens
$0.01421,200in / 340out
$0.5000
TrendIndicator
Metric trend direction with auto-calculated percentage or custom label.
Percentage change
+5.2%-3.1%0.0%
Custom label
TrendingDeclining
StarRating
Five-star rating display — read-only when no handler is passed.
Ratings
(5/5)
(3/5)
(1/5)
SortIndicator
Column sort direction arrow for table headers.
Sort directions
AIConfidenceScore
Confidence score for AI-generated content with banded levels.
Scores
92%61%28%
§01
Forms & input chrome
Form primitives, keyboard hints, and local-state interactive atoms.
Label
Accessible field label, always visible above its control.
Kbd
Keyboard key hint — single keys and grouped shortcuts.
Single keys
EscEnter/
Shortcut group
CmdK
Input
Text input field rendered with local route state.
Checkbox
Boolean selection primitive with checked and indeterminate states.
Toggle
Pressed/unpressed button primitive with variant and size styling.
Slider
Range input primitive with controlled value feedback.
Popover
Anchored overlay primitive using trigger and content parts.
§01
Messaging & conversation
Chat-surface primitives.
MessageBubble
Single chat message — sender and receiver variants.
How does the showcase route get reached?
Through the Atoms link in the tier nav.
TypingIndicator
Animated dots showing the other party is composing a message.
§01
Documentation & overlays
Code rendering, greetings, and tooltip chrome.
CodeBlock
Titled, recessed code snippet for documentation surfaces.
Import an atom
import { Badge } from '@stackmates/ui-interactive/atoms';TimeGreeting
Time-of-day aware greeting personalised with a first name.
Tooltip
Contextual hint surfaced on hover or focus of its trigger.