BriteTimeline

Sharedcomponent✓ stamped

Vertical activity timeline of events.

@brite-nites/design-system/primitives/brite-timeline

Activity / audit feed. Icons render directly (no frame), colored by event tone. The rail between adjacent items transitions from the current tone to the next via a vertical gradient so the thread blends. Seven tones: default, success, warning, info, danger, pink, purple.

Default

Typical activity feed — actor + action + time. The rail gradient shifts with each event.

Max edited the quote
2m ago
Max sent the quote to client
1h ago
Sarah Chen accepted the quote
3h ago
Max assigned crew lead Danny R.
yesterday

With body content

Add body under the title — description, diff, quoted comment. Pink for tag events, purple for comments, info for communications.

Max changed the margin target
15m ago
55% → 60%
Max tagged this quote priority
20m ago
Sarah Chen commented
1h ago
“Can we add the rooftop section before Thanksgiving? We need the install complete by 11/20.”
Margin dropped below target
2h ago
Added Premium C9 Kit (+$420 cost). Current margin: 47% (target 55%).
Max rejected the approval request
yesterday
“Discount too aggressive — propose alternate tier instead.”

Compact — no body

Lifecycle / progress pattern. Watch the rail gradient cascade through the sequence.

Quote created
Nov 3
Sent to client
Nov 4
Accepted
Nov 6
Install scheduled
Nov 15

All tones

Seven icon tones. Each colors the icon and half of the rail blending into the next event.

default
success
warning
info
danger
pink
purple