ListItem

Stable

A list row with leading media, title, description, metadata and actions.

ListItem lays out one row of a List. Pass structured props for the common layout, or children for custom content. With asChild, the main area becomes your link or button while actions stay separate, so each row has one clear primary target.

Source Edit docs Report an issue

Overview

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

tsx

import { Badge, Icon, List, ListItem } from '@bindshq/stance-react';

export function Structured() {
  return (
    <List bordered aria-label="Recent deployments">
      <ListItem
        leading={<Icon name="check-circle" size="md" />}
        title="Sales 2026 deployed"
        description="48 mailboxes updated through the Exchange relay"
        meta="09:20"
      />
      <ListItem
        leading={<Icon name="alert-triangle" size="md" />}
        title="2 mailboxes failed"
        description="Mailbox not found for tomas@binds.si"
        meta={
          <Badge tone="danger" size="sm">
            Failed
          </Badge>
        }
      />
    </List>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

Light

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

Dark

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

High contrast

Import

tsx

import { List, ListItem } from '@bindshq/stance-react';

Platforms

ListItem has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { List, ListItem } from '@bindshq/stance-react';

Examples

Interactive rows

asChild makes the main area a real link or button. Actions sit outside it.

Sales 2026Assigned to 12 people
ExecutiveAssigned to 12 people

tsx

import { Button, Icon, List, ListItem } from '@bindshq/stance-react';

export function Interactive() {
  return (
    <List bordered aria-label="Templates">
      {['Sales 2026', 'Executive'].map((t) => (
        <ListItem
          key={t}
          asChild
          leading={<Icon name="file-text" />}
          title={t}
          description="Assigned to 12 people"
          actions={
            <Button size="sm" variant="ghost">
              Duplicate
            </Button>
          }
        >
          <a href={`#${t}`} />
        </ListItem>
      ))}
    </List>
  );
}

Selected and disabled

ArchiveRead only

tsx

import { Avatar, List, ListItem } from '@bindshq/stance-react';

export function States() {
  return (
    <List aria-label="Workspaces" dividers={false}>
      <ListItem
        asChild
        selected
        leading={<Avatar name="Binds" shape="square" size="sm" decorative />}
        title="Binds"
      >
        <button type="button" />
      </ListItem>
      <ListItem
        asChild
        leading={<Avatar name="eSignify" shape="square" size="sm" decorative />}
        title="eSignify"
      >
        <button type="button" />
      </ListItem>
      <ListItem
        disabled
        leading={<Avatar name="Archive" shape="square" size="sm" decorative />}
        title="Archive"
        description="Read only"
      />
    </List>
  );
}

API reference

Prop	Type	Default	Description
`leading`	`ReactNode`	None	Avatar, icon or thumbnail.
`title`	`ReactNode`	None	Primary text.
`description`	`ReactNode`	None	Secondary text.
`meta`	`ReactNode`	None	Trailing metadata such as a date or badge.
`actions`	`ReactNode`	None	Trailing actions, outside the interactive area.
`asChild`	`boolean`	`false`	Render the main area as your single link or button child.
`selected`	`boolean`	`false`	Highlight and set aria-current.
`disabled`	`boolean`	`false`	Dim the row and disable pointer interaction.

Accessibility

Renders an <li>, so it must be inside a List (or another <ul>/<ol>).
With asChild, the whole main area is one link or button whose accessible name combines the title and description.
Actions render after the main area, so tab order is: row, then its actions.
selected sets aria-current="true" for navigation-style lists.

Keyboard

Keys	Action
`Tab`	Moves to the row’s link or button, then to its actions.
`Enter`	Follows the row link or activates the row button.

Usage guidelines

Do

Give interactive rows a single primary destination.

Don’t

Put buttons inside an asChild link; use actions instead.

Overview

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

tsx

import { Badge, Icon, List, ListItem } from '@bindshq/stance-react';

export function Structured() {
  return (
    <List bordered aria-label="Recent deployments">
      <ListItem
        leading={<Icon name="check-circle" size="md" />}
        title="Sales 2026 deployed"
        description="48 mailboxes updated through the Exchange relay"
        meta="09:20"
      />
      <ListItem
        leading={<Icon name="alert-triangle" size="md" />}
        title="2 mailboxes failed"
        description="Mailbox not found for tomas@binds.si"
        meta={
          <Badge tone="danger" size="sm">
            Failed
          </Badge>
        }
      />
    </List>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

Light

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

Dark

Sales 2026 deployed48 mailboxes updated through the Exchange relay09:20
2 mailboxes failedMailbox not found for tomas@binds.siFailed

High contrast

Platforms

ListItem has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { List, ListItem } from '@bindshq/stance-react';

Examples

API reference

Prop	Type	Default	Description
`leading`	`ReactNode`	None	Avatar, icon or thumbnail.
`title`	`ReactNode`	None	Primary text.
`description`	`ReactNode`	None	Secondary text.
`meta`	`ReactNode`	None	Trailing metadata such as a date or badge.
`actions`	`ReactNode`	None	Trailing actions, outside the interactive area.
`asChild`	`boolean`	`false`	Render the main area as your single link or button child.
`selected`	`boolean`	`false`	Highlight and set aria-current.
`disabled`	`boolean`	`false`	Dim the row and disable pointer interaction.

Accessibility

Renders an <li>, so it must be inside a List (or another <ul>/<ol>).

With asChild, the whole main area is one link or button whose accessible name combines the title and description.

Actions render after the main area, so tab order is: row, then its actions.

selected sets aria-current="true" for navigation-style lists.

Keyboard

Keys	Action
`Tab`	Moves to the row’s link or button, then to its actions.
`Enter`	Follows the row link or activates the row button.

Overview

Light, dark and high contrast

Import

Platforms

Examples

Interactive rows

Selected and disabled

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

Interactive rows

Selected and disabled

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related