Message card
DraftA compact card that displays a message preview for messaging or notification list interfaces.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Chat bubble, Message bubble, Conversation item
Anatomy
A message card supports two layout variants — artwork on top and artwork on the side. Both share the same structural parts.
Asset
(Optional)
(Optional)
Heading
Paragraph
🖼
CTA
Dismiss button
(Optional)
(Optional)
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { MessageCard } from '@arch-ui/components';
<MessageCard
sender="Jane Doe"
avatar={<Avatar name="Jane Doe" size="small" />}
message="Hey, are you available for a quick sync this afternoon?"
timestamp="2m ago"
onClick={() => navigate('/messages/123')}
/>
Unread state
<MessageCard
sender="Alex Kim"
message="The design review is scheduled for tomorrow."
timestamp="1h ago"
unread
/>
With action menu
<MessageCard
sender="Sam Lee"
message="Uploaded the final assets to the shared folder."
timestamp="Yesterday"
endEnhancer={<IconButton icon={<MoreIcon />} aria-label="Message options" />}
/>
Expected props
| Prop | Type | Default | Description |
|---|---|---|---|
sender | string | required | Name of the message sender. |
avatar | ReactNode | -- | Avatar or icon for the sender. |
message | string | required | Message preview text. Typically truncated to one or two lines. |
timestamp | string | -- | Relative or absolute time label. |
unread | boolean | false | Whether the message is unread. Applies bold styling and an unread indicator. |
onClick | () => void | -- | Click handler. Makes the card interactive. |
endEnhancer | ReactNode | -- | Content rendered at the trailing edge (e.g. action menu). |
className | string | -- | Additional CSS class names. |
Accessibility
- Interactive cards should use
role="button"or be wrapped in an anchor for navigation. - The unread state should be conveyed to screen readers, e.g. via
aria-labelthat includes "unread" or a visually hidden status text. - The timestamp should use a
<time>element with adatetimeattribute for machine-readable dates. - Ensure sufficient colour contrast between read and unread states.