Usage

A single, flexible item primitive that unifies the "start content + label + description + end content" pattern across Astryx. Use it wherever you need a structured row: dropdown menus, selectors, contact lists, notifications, file browsers, and activity feeds.

import { Item } from '@astryx-vue/core/List'

Everything else that looks like a row is built from this one. List Item adds the list element and the marker; menus, selectors, and result rows wrap it with the role their parent owns. The row paints nothing beyond text and slots, so the surrounding surface decides how it looks.

Anatomy

Element	Description
Marker	Optional list bullet/counter rendered before start content.
Start content	Leading visual: avatar, icon, image, or checkbox.
Label	Primary text identifying the item.
Description	Secondary supporting text below the label.
End content	End-aligned content: badges, timestamps, or action buttons.

Best practices

Guidance	Practice
Do	Use named slots (startContent, label, description, endContent) for the common layout. These cover the 80% case.
Do	Use density="compact" for menus and dense lists, "balanced" for standard rows, and "spacious" for roomier layouts.
Do	Set labelLines and descriptionLines to control truncation when content length varies.
Do	Use align="start" when start or end content is taller than a single line of text.
Do	Give a swipe action a second home in the row (a menu or a button in endContent): the swipe is a touch accelerator, and a verb reachable only by swipe is unreachable by keyboard and by mouse.
Avoid	Don't nest interactive elements (buttons, links) inside an interactive Item; it creates confusing focus and click targets.
Avoid	Don't use Item for navigation between views; use proper navigation components instead.
Avoid	Don't add read/unread or inbox-specific behavior directly; compose a thin wrapper like PreviewItem instead.

Examples

Common configurations, variations, and states.

Basic

Quarterly planningAgenda, notes, and action items Today

Customer researchInterview notes from the latest study Yesterday

Launch checklistRemaining tasks before release Fri

A basic item with a label, supporting description, and end-aligned timestamp. Use this for simple rows that need consistent text alignment and spacing.

Document Tabs

Single-row, horizontally scrollable document switcher with compact selected rows, leading file icons, instant reveal-on-hover close actions with reserved geometry, stable separators, and an add control outside the scroll area. Use for editor tabs, workspace tabs, open documents, files, canvases, or panels.

Metadata

Build passedProduction deploy completed 2m ago

High memory usageWorker pool is above the warning thresholdWarning

Sync failedRetry after checking service credentialsAction

Items with end-aligned metadata and badges. Use the endContent slot for counts, status, timestamps, and other secondary row information.

Start Content

ALOwner

GH Online

New

Items with leading avatars and icons in the startContent slot. Keep start content small so the row stays compact and easy to scan.