List

Styled list component supporting ordered and unordered types, optional icons on each item, and an optional divider between items. Use lt-list-item for items that need icons or proper nesting behavior.

Playground

Type

Size

Marker Color

Divider

No Marker

Theme

Icon Start

Icon End

Clickable

Href

Target

Rel

Disabled

HTMLReact

ShareCopy

Usage

<!-- Basic unordered list -->
<lt-list>
<lt-list-item>Design tokens</lt-list-item>
<lt-list-item>Web Components</lt-list-item>
<lt-list-item>Framework wrappers</lt-list-item>
</lt-list>

<!-- Ordered list -->

<lt-list type="ordered">
<lt-list-item>Install packages</lt-list-item>
<lt-list-item>Import tokens CSS</lt-list-item>
<lt-list-item>Use components</lt-list-item>
</lt-list>

<!-- With icons -->

<lt-list>
<lt-list-item icon-start="check">Task completed</lt-list-item>
<lt-list-item icon-start="clock">In progress</lt-list-item>
<lt-list-item icon-start="info-circle" icon-end="arrow-right">
  View details
</lt-list-item>
</lt-list>

<!-- With dividers -->

<lt-list divider>
<lt-list-item icon-start="user">Profile</lt-list-item>
<lt-list-item icon-start="settings">Settings</lt-list-item>
<lt-list-item icon-start="sign-out">Sign out</lt-list-item>
</lt-list>

<!-- No marker — useful with icons or custom layouts -->

<lt-list no-marker>
<lt-list-item icon-start="check">Feature one</lt-list-item>
<lt-list-item icon-start="check">Feature two</lt-list-item>
<lt-list-item icon-start="check">Feature three</lt-list-item>
</lt-list>

<!-- Interactive rows — clickable renders a native button, href an anchor -->

<lt-list no-marker>
<lt-list-item clickable icon-end="arrow-right">Pick an album</lt-list-item>
<lt-list-item href="/settings/profile" icon-start="user">Profile</lt-list-item>
</lt-list>

import { List, ListItem } from '@latty-ds/react';

{/* Basic unordered list */}

<List>
<ListItem>Design tokens</ListItem>
<ListItem>Web Components</ListItem>
<ListItem>Framework wrappers</ListItem>
</List>

{/* Ordered list */}

<List type="ordered">
<ListItem>Install packages</ListItem>
<ListItem>Import tokens CSS</ListItem>
<ListItem>Use components</ListItem>
</List>

{/* With icons */}

<List>
<ListItem iconStart="check">Task completed</ListItem>
<ListItem iconStart="clock">In progress</ListItem>
<ListItem iconStart="info-circle" iconEnd="arrow-right">
  View details
</ListItem>
</List>

{/* With dividers */}

<List divider>
<ListItem iconStart="user">Profile</ListItem>
<ListItem iconStart="settings">Settings</ListItem>
<ListItem iconStart="sign-out">Sign out</ListItem>
</List>

{/* No marker */}

<List noMarker>
<ListItem iconStart="check">Feature one</ListItem>
<ListItem iconStart="check">Feature two</ListItem>
<ListItem iconStart="check">Feature three</ListItem>
</List>

{/* Interactive rows — clickable renders a native button, href an anchor */}

<List noMarker>
<ListItem clickable iconEnd="arrow-right" onClick={pickAlbum}>Pick an album</ListItem>
<ListItem href="/settings/profile" iconStart="user">Profile</ListItem>
</List>

<template>
<!-- Basic unordered list -->
<lt-list>
  <lt-list-item>Design tokens</lt-list-item>
  <lt-list-item>Web Components</lt-list-item>
  <lt-list-item>Framework wrappers</lt-list-item>
</lt-list>

<!-- Ordered list -->

<lt-list type="ordered">
<lt-list-item>Install packages</lt-list-item>
<lt-list-item>Import tokens CSS</lt-list-item>
<lt-list-item>Use components</lt-list-item>
</lt-list>

<!-- With icons -->

<lt-list>
<lt-list-item icon-start="check">Task completed</lt-list-item>
<lt-list-item icon-start="clock">In progress</lt-list-item>
<lt-list-item icon-start="info-circle" icon-end="arrow-right">
  View details
</lt-list-item>
</lt-list>

<!-- With dividers -->

<lt-list divider>
<lt-list-item icon-start="user">Profile</lt-list-item>
<lt-list-item icon-start="settings">Settings</lt-list-item>
<lt-list-item icon-start="sign-out">Sign out</lt-list-item>
</lt-list>

<!-- No marker -->

<lt-list no-marker>
<lt-list-item icon-start="check">Feature one</lt-list-item>
<lt-list-item icon-start="check">Feature two</lt-list-item>
<lt-list-item icon-start="check">Feature three</lt-list-item>
</lt-list>

<!-- Interactive rows — clickable renders a native button, href an anchor -->

<lt-list no-marker>
  <lt-list-item clickable icon-end="arrow-right" @click="pickAlbum">Pick an album</lt-list-item>
  <lt-list-item href="/settings/profile" icon-start="user">Profile</lt-list-item>
</lt-list>
</template>

API — lt-list

API — lt-list-item