Usage

List item with label, description, start/end content slots, and interactive patterns.

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

One row of a List, rendered as an <li>. The row draws itself from label and description, and takes a leading and a trailing slot around them. It stays a plain row until you give it something to do: an @click turns the row into a button, href turns it into a link, and interactiveRef points at a control inside the row that already carries the action.

ListItem is the list-shaped entry point to the general row primitive, Item. Use Item when the row does not live in a list.

Examples

Common configurations, variations, and states.

Basic

Account settings

• ProfileName, avatar, and bio
• NotificationsEmail and push alerts
• SecurityPassword and two-factor auth

Basic list items with labels and descriptions. Use this structure for settings, navigation summaries, and other simple collections.

Media

Team

• ALOwner
• GHOn call

List items with leading avatars and icons. Use startContent for compact visual identifiers that help users scan the collection.

Metadata

Inbox

• 3
• Yesterday
• Old incident reportArchived and read-only Apr 12

List items with end-aligned metadata. Use endContent for badges, counts, timestamps, and compact status details.