Interactive Atoms
ImportCC
Available via @stackmates/ui-interactive/atoms
Button
Primary action trigger with 6 visual variants and 3 sizes.
ButtonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | 'default' | Visual style variant |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | Button size |
| asChild | boolean | false | Render as child element via Radix Slot |
| children* | ReactNode | — | Button content |
Installation
typescript
import { Button } from '@stackmates/ui-interactive/atoms';Usage
Basic
tsx
<Button variant="default">Click me</Button>Large secondary
tsx
<Button variant="secondary" size="lg">Large</Button>Accessibility
- Renders as <button> — keyboard accessible by default
- Use asChild to render as <a> for navigation links
Related:
Badge
Inline label with 7 color variants for tags and categories.
DefaultSecondaryOutlineDestructive
BadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'danger' | 'default' | Visual style variant |
| children* | ReactNode | — | Badge content |
Installation
typescript
import { Badge } from '@stackmates/ui-interactive/atoms';Usage
Basic
tsx
<Badge>New</Badge>
<Badge variant="destructive">Error</Badge>Accessibility
- Renders as inline <span> — no interactive semantics needed
- Color is decorative; variant name conveys meaning via text
- Use aria-label when badge replaces visible text
Related:
RoleBadge
Stakeholder role badge for enterprise buying committees.
ChampionEconomic BuyerTechnicalLegalProcurementEnd UserExecutive
With influence:
ChampionEconomic BuyerTechnical
RoleBadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
| role* | StakeholderRole | — | Stakeholder role to display |
| influence | 'high' | 'medium' | 'low' | — | Influence level in buying decision |
| showIcon | boolean | true | Show role icon |
| showInfluence | boolean | false | Show influence indicator dot |
| size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
Installation
typescript
import { RoleBadge, STAKEHOLDER_ROLES } from '@stackmates/ui-interactive/atoms';Usage
Basic
tsx
<RoleBadge role="champion" />With influence
tsx
<RoleBadge role="economic_buyer" influence="high" showInfluence />Accessibility
- Icon + text convey role (not color alone)
- Influence dot uses color + position for distinction
- Renders as inline <span> with semantic text content
Related:
MessageBubble
Styled content bubble for messaging. Sender right-aligned, receiver left-aligned.
Hello! How can I help you?
Analyze our sales pipeline.
Analyzing...
MessageBubbleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | string | — | Message text |
| variant* | 'sender' | 'receiver' | — | Alignment and color style |
| isStreaming | boolean | false | Show cursor animation |
Installation
typescript
import { MessageBubble } from '@stackmates/ui-interactive/atoms';Usage
Receiver
tsx
<MessageBubble variant="receiver" content="Hello!" />Streaming
tsx
<MessageBubble variant="receiver" content="Typing..." isStreaming />Accessibility
- Sender/receiver alignment provides visual role distinction
- Streaming cursor uses CSS animation (no aria-live needed at atom level)
- Text content readable by screen readers
Related:
TypingIndicator
Animated bouncing dots for loading/typing states.
Agent is typing...
TypingIndicatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
Installation
typescript
import { TypingIndicator } from '@stackmates/ui-interactive/atoms';Accessibility
- Animated dots are decorative — pair with sr-only "Loading" text in parent
- Uses CSS animation (prefers-reduced-motion respected via Tailwind)
Related:
CostDisplay
Formatted cost and token usage display for AI operations.
$0.1257
$0.02341,200in / 3,400out
CostDisplayProps
| Prop | Type | Default | Description |
|---|---|---|---|
| costUsd* | number | — | Cost in USD |
| tokens | { input: number; output: number } | — | Token usage counts |
Installation
typescript
import { CostDisplay } from '@stackmates/ui-interactive/atoms';Accessibility
- Uses formatted numbers for readability (e.g., $0.1257)
- Token counts displayed as plain text — no visual-only encoding