Data Display Atoms
ImportCC
Available via @stackmates/ui-interactive/atoms
PriceDisplay
Formatted currency display with preset support (USD, EUR, GBP, AUD, JPY) and compact notation.
$125.00€99,99EUR£45.99
$(75.00)$12.3K$0.00
PriceDisplayProps
| Prop | Type | Default | Description |
|---|---|---|---|
| amount* | number | bigint | — | Amount in smallest currency unit (cents for USD/EUR) |
| currency | string | CurrencyConfig | 'USD' | Currency preset code or custom config |
| showSymbol | boolean | true | Show currency symbol |
| showCode | boolean | false | Show currency code after amount |
| compact | boolean | false | Use compact notation for large numbers |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'md' | Text size variant |
| variant | 'default' | 'muted' | 'success' | 'danger' | 'primary' | 'default' | Color variant (negative amounts auto-switch to danger) |
Installation
typescript
import { PriceDisplay } from '@stackmates/ui-interactive/atoms';Usage
Basic (cents)
tsx
<PriceDisplay amount={12500} /> {/* $125.00 */}Compact large values
tsx
<PriceDisplay amount={1234567} compact size="xl" />Accessibility
- Renders as <span> with tabular-nums for consistent digit width
- Currency symbol is visible text, not icon-only
- Negative values indicated by parentheses and red color (not color alone)
Related:
AIConfidenceScore
AI confidence badge with HITL color coding: green (>=80%), yellow (60-79%), red (<60%).
HITL color coding
92%68%35%
85%50%
AIConfidenceScoreProps
| Prop | Type | Default | Description |
|---|---|---|---|
| score* | number | — | Confidence score (0-100 or 0-1, auto-normalized) |
| size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
| showIcon | boolean | true | Show the AI sparkle icon |
| showLabel | boolean | true | Show the confidence level label |
| label | string | — | Custom label (overrides default level label) |
Installation
typescript
import { AIConfidenceScore } from '@stackmates/ui-interactive/atoms';Usage
Percentage input
tsx
<AIConfidenceScore score={92} />Decimal input (auto-normalized)
tsx
<AIConfidenceScore score={0.85} size="sm" />Accessibility
- Color + text label convey confidence level (not color alone)
- Title attribute provides full "AI Confidence: N%" tooltip
- Sparkle icon is aria-hidden, decorative only
Related:
AISuggestedBadge
Badge labeling AI-generated, suggested, enhanced, or auto-filled content.
AI GeneratedAI SuggestedAI EnhancedAuto-filledCustom Label
AISuggestedBadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'generated' | 'suggested' | 'enhanced' | 'auto-filled' | 'generated' | Type of AI suggestion |
| size | 'sm' | 'md' | 'sm' | Size variant |
| label | string | — | Custom label (overrides default) |
Installation
typescript
import { AISuggestedBadge } from '@stackmates/ui-interactive/atoms';Usage
Default (generated)
tsx
<AISuggestedBadge />Enhanced variant
tsx
<AISuggestedBadge variant="enhanced" size="md" />Accessibility
- Icon + text label convey AI origin (not icon alone)
- Each variant uses distinct icon for additional differentiation
- data-variant attribute available for test selectors
Related:
AIConfidenceScoreCompact
Compact inline variant showing just score percentage with HITL color indicator. Use for tight layouts like table cells.
Inline usage alongside text
95%72%38%
In context
Suggested price: $12,50087%
AIConfidenceScoreCompactProps
| Prop | Type | Default | Description |
|---|---|---|---|
| score* | number | — | Confidence score (0-100 or 0-1, auto-normalized) |
| className | string | — | Additional CSS classes |
Installation
typescript
import { AIConfidenceScoreCompact } from '@stackmates/ui-interactive/atoms';Usage
Inline with content
tsx
<span>Suggested price: $12,500 <AIConfidenceScoreCompact score={87} /></span>In a table cell
tsx
<AIConfidenceScoreCompact score={0.92} />Accessibility
- Title attribute provides "AI Confidence: N%" tooltip on hover
- Sparkle icon is aria-hidden as decorative, score text conveys information
- Color-coded text matches HITL thresholds (green >= 80%, yellow 60-79%, red < 60%)
Related:
AISuggestedIcon
Icon-only variant of AISuggestedBadge for inline use where space is limited. Shows tooltip on hover.
Inline with text
Deal summary
AISuggestedIconProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'generated' | 'suggested' | 'enhanced' | 'auto-filled' | 'generated' | Type of AI suggestion (determines icon and tooltip) |
| className | string | — | Additional CSS classes |
Installation
typescript
import { AISuggestedIcon } from '@stackmates/ui-interactive/atoms';Usage
Inline indicator
tsx
<span>Deal summary <AISuggestedIcon variant="generated" /></span>Different variants
tsx
<AISuggestedIcon variant="suggested" />
<AISuggestedIcon variant="enhanced" />Accessibility
- Title attribute provides variant label (e.g. "AI Generated") as tooltip
- Icon-only display relies on title for screen reader context
- Each variant uses a distinct Lucide icon for visual differentiation beyond color
ProgressStateful
State-aware progress bar with idle/active/complete/error states and customizable labels.
In progress...45%
Complete!100%
Upload failed72%
ProgressStatefulProps
| Prop | Type | Default | Description |
|---|---|---|---|
| state* | 'idle' | 'active' | 'complete' | 'error' | — | Current progress state (idle renders nothing) |
| progress* | number | — | Progress percentage (0-100) |
| labels | Partial<Record<'active' | 'complete' | 'error', string>> | — | Custom labels per state |
Installation
typescript
import { ProgressStateful } from '@stackmates/ui-interactive/atoms';Usage
Active state
tsx
<ProgressStateful state="active" progress={45} />Error with custom label
tsx
<ProgressStateful state="error" progress={72} labels={{ error: 'Upload failed' }} />Accessibility
- State label is visible text, not color alone
- Progress percentage displayed as numeric text
- Idle state renders nothing (no empty container)
Related:
StarRating
Interactive 1-5 star rating with hover scale feedback and disabled read-only mode.
(3/5)
(4/5)
(2/10)
StarRatingProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current rating value (1-max) |
| onChange | (value: number) => void | — | Change handler for interactive mode |
| disabled | boolean | false | Disable interaction |
| max | number | 5 | Maximum number of stars |
| size | 'sm' | 'md' | 'lg' | 'md' | Star size variant |
Installation
typescript
import { StarRating } from '@stackmates/ui-interactive/atoms';Usage
Interactive
tsx
const [rating, setRating] = useState(3);
<StarRating value={rating} onChange={setRating} />Read-only
tsx
<StarRating value={4} disabled />Accessibility
- Each star is a <button> with aria-label "Rate N of M stars"
- Disabled state uses cursor-not-allowed and muted styling
- Numeric rating shown as text "(N/M)" alongside stars
Related:
ErrorMessage
Error text display with role="alert" for form validation feedback.
This field is required.
Email address is not valid.
ErrorMessageProps
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | — | Error text to display (renders nothing when empty) |
| id | string | — | HTML id for aria-describedby linking |
Installation
typescript
import { ErrorMessage } from '@stackmates/ui-interactive/atoms';Usage
Basic
tsx
<ErrorMessage message="This field is required." />With aria linking
tsx
<ErrorMessage message="Invalid email" id="email-error" />
<input aria-describedby="email-error" />Accessibility
- Uses role="alert" for screen reader announcement
- Supports id prop for aria-describedby linking to form inputs
- Renders nothing when message is empty (no empty container)
Related:
Badge
General-purpose label/tag with 7 semantic variants. CVA-styled with Radix Slot support for polymorphism.
DefaultSecondaryOutlineDestructive
SuccessWarningDanger
BadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'danger' | 'default' | Visual variant determining color scheme |
| asChild | boolean | false | Merge props onto child element via Radix Slot (e.g. render an <a> styled as Badge) |
| className | string | — | Additional CSS classes |
Installation
typescript
import { Badge } from '@stackmates/ui-interactive/atoms';Usage
Default variant
tsx
<Badge>New</Badge>Semantic variants
tsx
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Overdue</Badge>As link (Slot pattern)
tsx
<Badge asChild variant="outline">
<a href="/deals">View Deals</a>
</Badge>Accessibility
- Renders as <span> by default with proper inline semantics
- asChild merges props onto child element via Radix Slot
- Focus-visible ring for keyboard navigation when used as link
- aria-invalid triggers destructive ring styling for error states
Related:
TrendIndicator
Displays metric trend direction with percentage change or custom label. Auto-calculates direction from sign of change value.
Auto-direction from change value
+12.5%-3.8%0.0%
Custom label with explicit direction
GrowingDecliningFlat
TrendIndicatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| change | number | — | Percentage change value (e.g. 5.2 for +5.2%). Direction auto-calculated from sign. |
| direction | 'up' | 'down' | 'stable' | — | Trend direction. Auto-calculated from change, or required when using label. |
| label | string | — | Custom label text instead of percentage. When used, direction is required. |
| showPercent | boolean | true | Show percentage sign after numeric change |
| size | 'sm' | 'md' | 'md' | Text and icon size variant |
Installation
typescript
import { TrendIndicator } from '@stackmates/ui-interactive/atoms';Usage
Numeric change (auto-direction)
tsx
<TrendIndicator change={5.2} /> {/* Green up arrow +5.2% */}
<TrendIndicator change={-3.1} /> {/* Red down arrow -3.1% */}Custom label
tsx
<TrendIndicator direction="up" label="Growing fast" />Accessibility
- Icon + text convey direction (not color alone)
- data-direction attribute for test selectors
- data-testid="trend-indicator" for automated testing
- Icons are aria-hidden, text content provides meaning
Related:
CostDisplay
Formatted USD cost display with optional input/output token counts. Designed for AI operation cost visibility.
$0.0042
$0.1523
$1.2000
$0.00871,250in / 340out
CostDisplayProps
| Prop | Type | Default | Description |
|---|---|---|---|
| costUsd* | number | — | Cost amount in USD (displayed to 4 decimal places) |
| tokens | { input: number; output: number } | — | Optional token counts shown alongside cost |
| className | string | — | Additional CSS classes |
Installation
typescript
import { CostDisplay } from '@stackmates/ui-interactive/atoms';Usage
Cost only
tsx
<CostDisplay costUsd={0.0042} />With token breakdown
tsx
<CostDisplay costUsd={0.0087} tokens={{ input: 1250, output: 340 }} />Accessibility
- Uses tabular-nums for consistent digit width alignment
- Cost value displayed as text, not color-coded
- Token counts provide additional context alongside cost
Related: