List · astryx-svelte

Usage

A vertical collection of items with consistent spacing, dividers, and optional markers. Supports headers, icons, avatars, badges, and interactive items with click or link behavior. Use it to display ordered or unordered groups of related content.

ts
 
import { List } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Provide a header to label the list and give context to screen readers.
Do	Use start and end content slots to add icons, avatars, or badges to each item.
Don't	Place interactive elements inside an interactive list item; it creates nested click targets and confusing focus behavior.
Don't	Use a list for a single item or for laying out unrelated content; lists imply a meaningful collection.
Don't	Mix clickable and non-clickable items in the same list without clear visual distinction.

Examples

Common configurations, variations, and states.

List — Basic

Simple list with labels and descriptions for settings-style layouts.

List — Bulleted Features

Bulleted list of feature highlights using disc markers.

List — Message List

Chat-style message list with avatars, preview text, and unread badges.

List — Ordered Steps

Numbered step-by-step instructions using decimal list markers.