'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Comment
Conversations: comments with author, relative time (full date on hover), badges, edited and restricted notes, saving and failed states, actions, nested replies, and a composer that grows and sends with ⌘Enter.
import { Comment, CommentComposer } from '@alea/ui';
Examples
Comment thread
Comments with relative times, badges, edits, a restricted note, nested replies, actions and a composer (⌘Enter sends).
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Edited
isEdited - Highlighted
isHighlighted - State
state
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent-subtle…--alea-border…--alea-status-danger…--alea-status-warning…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-2xs…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-slow…
Props
Comment props
One comment in a conversation: author, time, text, actions, and nested replies.
| Prop | Type | Default | Description |
|---|---|---|---|
authorrequired | string | - | Who wrote it. |
childrenrequired | ReactNode | - | The comment. |
actions | ReactNode | - | Actions under it: Reply, Like, Edit (use Button variant="text" size="xs"). |
avatarSrc | string | - | Their photo. |
badge | ReactNode | - | A short tag after the name: Author, Admin, Bot. |
className | string | - | Extra class names. |
errorMessage | ReactNode | - | What went wrong when state is failed, with your retry action in actions. |
headingLevel | 2 | 3 | 4 | 5 | 6 | - | Heading level of the author line for screen readers' heading navigation. Default none (plain text). |
isEdited | boolean | - | Marks it as edited. |
isHighlighted | boolean | - | Draws attention to it: a linked or new comment. |
replies | ReactNode | - | Replies: nested Comment elements. |
restricted | ReactNode | - | Only some people can see it: shows a lock and this text ("Only visible to your team"). |
state | "failed" | "saving" | - | Shows it as being saved (dimmed) or failed (with errorMessage). |
time | ReactNode | Date | - | When: a Date (shown relative, like "5 min ago", with the full date on hover) or your own text. |
CommentComposer props
Where people write a comment or a reply: grows with the text, ⌘Enter or Ctrl+Enter sends.
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmitrequired | (text: string) => void | - | Called with the text when sent; clear it yourself if you control value. |
author | string | - | Who is writing (shows their avatar). |
avatarSrc | string | - | Their photo. |
className | string | - | Extra class names. |
isSubmitting | boolean | - | Disables sending while it saves. |
label | string | - | Label for screen readers. Default "Comment". |
onCancel | (() => void) | - | Shows Cancel, for inline replies. |
placeholder | string | - | Placeholder. Default "Add a comment…". |
submitLabel | ReactNode | - | Text of the send button. Default "Comment". |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
Comment
- Variants
statefailedsaving- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-comment.alea-comment-main.alea-comment-head.alea-comment-author.alea-comment-badge.alea-comment-time.alea-comment-restricted.alea-comment-body.alea-comment-error.alea-comment-actions.alea-comment-replies- Data attributes
data-highlighteddata-state=saving
CommentComposer
- States
- Focus inside
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-comment-composer.alea-comment-field.alea-comment-input.alea-comment-composer-actions
Accessibility
- Each comment is an article; times are real time elements with the exact date.
- Failed comments announce their error as an alert.
- The composer is a labeled field; ⌘Enter or Ctrl+Enter sends, and the button says the shortcut.
Keyboard
| Key | Does |
|---|---|
| ⌘Enter / Ctrl+Enter | Sends the comment |
Do and don't
Do
- Keep replies one or two levels deep.
- Show who can see restricted comments.
Don't
- Don't hide actions until hover only: keyboard and touch people need them too.
The new Tree is ready for review: data mode, cascading checkboxes, lazy loading and drag and drop.