Component · Data display
a column of rows; list-item carries an icon, label, supporting line, selected and tone.
Example
Where available
Using it
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
| Target | Reference | Package |
|---|---|---|
| React | <List> | @design-foundry/lucent-react |
| Angular | <lucent-list> | @design-foundry/lucent |
| Web Components | <lucent-list> | @design-foundry/lucent-wc |
| Blazor | <LucentList> | DesignFoundry.Lucent |
API
| Prop | Type | Default | Description |
|---|---|---|---|
| list-item · label | string | — | primary text. |
| list-item · icon | string | — | leading glyph. |
| list-item · supporting | string | — | secondary line. |
| list-item · selected | boolean | false | chosen row. |
| list-item · tone | default | danger | default | destructive intent. |