Component reference
TimelineItem
One event on a Timeline: a marker, a title, its state and optional details.
Preview
TimelineItem has no story of its own; this one draws it as part of DetailSection.
Sections, timeline, and resource references
Shows the shared detail components on their own; does not simulate a work detail panel.
render: () => (
<Stack>
<DetailSection title="Section title" aside="Supporting note">
<p>The body is provided by the caller.</p>
</DetailSection>
<Timeline>
<TimelineItem
state="success"
title="Draft submitted"
stateLabel="Done"
description="09:12 · 4 files changed"
/>
<TimelineItem
state="returned"
title="Review returned"
stateLabel="Returned"
description="Two comments need a reply before the next run."
/>
<TimelineItem state="processing" title="Checks running" stateLabel="In progress" />
</Timeline>
<ResourceLink href="#sample" title="Sample link" detail="Link style" />
<ResourceLink
title="A very long sample resource name to observe how caller-supplied long text behaves"
detail="Button style"
/>
</Stack>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { TimelineItem } from "meowtail";
<TimelineItem
state="success"
title="Draft submitted"
stateLabel="Done"
description="09:12 · 4 files changed"
/>API reference
Props
| Prop | Type | Default |
|---|---|---|
titleRequired | Child | – |
stateWhat the marker says; stateLabel stays the source of truth. | StatusDotState | "unknown" |
stateLabel | Child | – |
description | Child | – |
actionsControls that belong to this event, for example opening its log. | Child | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootmarkercontentheadtitlestatedescriptionactions
Registry
The component is registered as timeline-item in the meowtail component registry.