List group
Usage
A vertical list of records, each with a title, optional description and a trailing slot. Where Table compares values across columns, a list group presents each item as a unit — which is what you want for inboxes, task lists and anything that has to work on a phone.import { Listgroup } from '@summonware/ui';Best practices
DoUse `trailing` for the one piece of status that matters. It is the only part scanned on the right.
DoGive items an `href` when they navigate — that produces a real link with real link behaviour.
Don'tUse a list group where columns need to be compared. That is a Table.
Don'tMark more than one item `active`. It means "this is what you are looking at", so there is only ever one.
Examples
Common configurations, variations and states.With status
- Design reviewDue tomorrowSoon
- Vendor onboardingWaiting on documents
- Q3 forecastCompletedDone
Titles and descriptions on the left, status badges on the right, one item marked active.
As navigation
With `href`, items render as anchors — real links with middle-click, open-in-new-tab and copy-address behaviour.
Reference variants
4 of 15 labels from the reference are demonstrated above.Basic exampleActive itemsWith badgesList groups [ Links ]Disabled itemsList groups [ Buttons ]FlushNumberedHorizontalContextual classesContextual classes [ links ]Custom contentList group CheckboxesList group radiosJavaScript behavior