Interactive Atoms
From @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 |
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
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 |
typescript
import { Badge } from '@stackmates/ui-interactive/atoms';Usage
Basic
tsx
<Badge>New</Badge>
<Badge variant="destructive">Error</Badge>Accessibility notes — Contribute this section
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 |
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 notes — Contribute this section
Related:Badge
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 |
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 notes — Contribute this section
TypingIndicator
Animated bouncing dots for loading/typing states.
Agent is typing...
TypingIndicatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
typescript
import { TypingIndicator } from '@stackmates/ui-interactive/atoms';Usage examples — Contribute this section
Accessibility notes — Contribute this section
Related:MessageBubble
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 |
typescript
import { CostDisplay } from '@stackmates/ui-interactive/atoms';Usage examples — Contribute this section
Accessibility notes — Contribute this section