ConversationCard

A card representing a conversation, with avatar, name, preview text, time, and optional unread count badge. Supports read/unread and active/inactive states.

Figma Library View in Storybook View in Playroom API Reference

Quick Start

Installation: npm install @adaptavant/eds-core
Import: import { ConversationCard } from '@adaptavant/eds-core';

Default

A basic conversation card with avatar, name, preview, and time.

Robert

2:30 PM

Hey, are you available?

<ConversationCard
  avatar={{ name: 'Robert', status: 'available' }}
  secondaryText="Hey, are you available?"
  timestamp="2:30 PM"
/>

View in Playroom

Unread

When isUnread is true, bold typography is applied and the count badge is shown.

Robert

2:30 PM

Hey, are you available?

3

<ConversationCard
  avatar={{ name: 'Robert', status: 'available' }}
  secondaryText="Hey, are you available?"
  timestamp="2:30 PM"
  isUnread
  count={3}
/>

View in Playroom

Active

When isActive is true, the item gets an active background. isActive and isUnread are independent.

Robert

2:30 PM

Hey, are you available?

Sarah

1:15 PM

Thanks for the update!

12

<Stack className="gap-1 w-full">
  <ConversationCard
    avatar={{ name: 'Robert', status: 'available' }}
    secondaryText="Hey, are you available?"
    timestamp="2:30 PM"
    isActive
  />
  <ConversationCard
    avatar={{ name: 'Sarah', status: 'busy' }}
    secondaryText="Thanks for the update!"
    timestamp="1:15 PM"
    isActive
    isUnread
    count={12}
  />
</Stack>

View in Playroom

API Reference

ConversationCard

Prop	Default	Description
`avatar`	_	`ReactNode \| { name: string; size?; status?; isGuest?; icon?; imageSrc? }` Either props forwarded to `Avatar`, or a custom React element to render in place of the avatar. When using the props object, `name` is also used as the primary label. Size defaults to 48 on mobile and 40 on larger viewports; pass `size` to override.
`primaryText?`	_	`ReactNode` The primary label when `avatar` is a custom element (e.g. contact name). Ignored when `avatar` is a props object.
`primaryRailEnd?`	_	`ReactNode` Optional content rendered after the primary label (e.g. a video camera icon).
`secondaryText?`	_	`ReactNode` The secondary label (e.g. last message preview).
`cardRailEnd?`	_	`ReactNode` Trailing content for the card (e.g. a close button).
`timestamp?`	_	`ReactNode` The time label (e.g. "2:30 PM").
`count?`	_	`number` Unread message count. Renders a count pill when > 0 and `isUnread` is true. Counts above 99 display as "99+".
`isUnread?`	`false`	`boolean` When true, applies bold typography and shows the count badge.
`isActive?`	`false`	`boolean` When true, applies the active/selected background.

Style API

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

ConversationCard parts

Robert

2:30 PM

Hey, are you available?

3

<ConversationCard
  classNames={{
    primary: 'text-accent',
    secondary: 'text-secondary'
  }}
  avatar={{ name: 'Robert', status: 'available' }}
  secondaryText="Hey, are you available?"
  timestamp="2:30 PM"
  isUnread
  count={3}
/>

View in Playroom

Part	Description
`root`	The outer card container.
`rail`	The inner rows that hold the primary/secondary text and trailing time or count.
`primaryContainer`	The wrapper around the primary label and optional `primaryRailEnd` content.
`primary`	The primary label (contact name).
`secondary`	The secondary label (message preview).
`time`	The timestamp.