Component reference
Item
A single readable destination.
Preview
Reading and navigation
The same item carries files, sources, and navigation destinations. Content wraps naturally and actions use native buttons.
render: () => (
<Measure>
<Stack>
<Item
title="Release check"
description="Static records show no clickable feedback."
meta="Record"
leading={<Icon name="file-text" />}
/>
<Item
as="button"
title="Design system"
description="Shared conventions for type, typography, and theme"
meta="Project"
leading={<Icon name="network" />}
trailing={<Icon name="arrow-right" />}
/>
<Item
as="button"
size="small"
variant="outline"
title="very-long-source-reference-component.tsx"
description="packages/meowtail/src/components/"
leading={<Icon name="file-text" />}
trailing="L24–48"
/>
<Item
as="button"
selected
title="Selected source"
description="Keeps position and reading context"
trailing={<Icon name="arrow-right" />}
/>
<Item as="button" disabled title="Unavailable file" description="File is not synced yet" />
</Stack>
</Measure>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Item } from "meowtail";
<Item
title="Release check"
description="Static records show no clickable feedback."
meta="Record"
leading={<Icon name="file-text" />}
/>API reference
Button content must not contain nested controls.
Props
| Prop | Type | Default |
|---|---|---|
size | "small" | "medium" | "medium" |
variant | "plain" | "outline" | "plain" |
as | "div" | "button" | "div" |
titleRequired | Child | – |
description | Child | – |
leading | Child | – |
trailing | Child | – |
meta | Child | – |
selected | boolean | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootleadingcontentmetatitledescriptiontrailing
Registry
The component is registered as item in the meowtail component registry.