List

Components

Code

List is a flexible component for displaying ordered or unordered lists with support for rich list items, borders, icons, and actions.

import { List,ListItem } from '@sproutsocial/racine'

<List>
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</List>

Properties

List

Name	Type	Default	Description
`as`	`\| "ul"` `\| "ol"`	`"ul"`	The HTML element to render as - either "ul" or "ol"
`children`	`React.ReactNode`		Array of elements to render as list items
`style`	`React.CSSProperties`		Inline styles to apply to the list element

ListItem

Overview

The List component provides a semantic and styled way to display collections of items. It supports both unordered (ul) and ordered (ol) lists and pairs with ListItem for consistent styling. ListItem can be customized with borders, icons, and additional content.

Recipes

Unordered list

The default list type is an unordered list (ul).

import { List,ListItem } from '@sproutsocial/racine'

<List>
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
  <ListItem>Third item</ListItem>
</List>

Ordered list

Use the as prop to render an ordered list (ol).

import { List,ListItem } from '@sproutsocial/racine'

<List as="ol">
  <ListItem>First step</ListItem>
  <ListItem>Second step</ListItem>
  <ListItem>Third step</ListItem>
</List>

List with bordered items

Add the isBordered prop to ListItem to display items with a border and padding, creating a card-like appearance.

import { List,ListItem } from '@sproutsocial/racine'

<List>
  <ListItem isBordered>
    Bordered Item 1
  </ListItem>
  <ListItem isBordered>
    Bordered Item 2
  </ListItem>
</List>

List with icons and content

Use ListItemContent to create rich list items with icons, text, details, and aside content.

import { List,ListItem,ListItemContent } from '@sproutsocial/racine'

<List>
  <ListItem>
    <ListItemContent
      iconName="tag-solid"
      text="Notification Title"
      details="This is additional detail text that provides context"
      aside="Nov 5"
    />
  </ListItem>
  <ListItem>
    <ListItemContent
      iconName="bell-outline"
      text="Another Notification"
      details="More information about this item"
      aside="Dec 10"
    />
  </ListItem>
</List>

List with actions

Add action buttons or menus to list items using the actions prop of ListItemContent.

import { List,ListItem,ListItemContent } from '@sproutsocial/racine'

<List>
  <ListItem>
    <ListItemContent
      iconName="alarm-clock-solid"
      text="Item requires attention"
      details="This item has an action button on the right"
      aside="2 days ago"
      actions={
        <Button appearance="unstyled" aria-label="Reconnect">
          <Icon name="plug-outline" size="small" aria-hidden="true" />
        </Button>
      }
    />
  </ListItem>
  <ListItem>
    <ListItemContent
      text="Another item with actions"
      aside="Nov 3"
      actions={
        <Button appearance="secondary" size="small">
          View
        </Button>
      }
    />
  </ListItem>
</List>

Bordered list with icons

Combine borders with icons for a polished look.

import { List,ListItem,ListItemContent } from '@sproutsocial/racine'

<List>
  <ListItem isBordered>
    <ListItemContent
      iconName="tag-solid"
      text="Negative Spikes – Snouts Paws & Tails"
      details="Are there any negative sentiment spikes in Snouts Paws & Tails Brand?"
      aside="Nov 5"
    />
  </ListItem>
  <ListItem isBordered>
    <ListItemContent
      iconName="chart-line-solid"
      text="Performance Report"
      details="Monthly performance metrics are now available"
      aside="Dec 10"
    />
  </ListItem>
</List>

List with custom styled items

ListItem can be styled using styled-components for custom border colors or other visual treatments.

import { List,ListItem,ListItemContent } from '@sproutsocial/racine'

<List>
  <ListItem
    border="500"
    borderColor="container.border.base"
    borderLeft="4px solid"
    borderLeftColor="container.border.error"
    borderTopLeftRadius="0"
    borderBottomLeftRadius="0"
    p={300}
  >
    <ListItemContent
      iconName="circle-exclamation-solid"
      text="Error notification"
      details="Something requires your attention"
      aside="2 days ago"
    />
  </ListItem>
  <ListItem
    border="500"
    borderColor="container.border.base"
    borderLeft="4px solid"
    borderLeftColor="container.border.info"
    borderTopLeftRadius="0"
    borderBottomLeftRadius="0"
    p={300}
  >
    <ListItemContent
      iconName="circle-i-solid"
      text="Info notification"
      details="New information is available"
      aside="Nov 3"
    />
  </ListItem>
</List>

Simple text-only list

For basic use cases, ListItem can contain plain text or any React nodes.

import { List,ListItem } from '@sproutsocial/racine'

<List>
  <ListItem>Simple text item</ListItem>
  <ListItem>Another simple item</ListItem>
  <ListItem>And one more</ListItem>
</List>

ListItem

ListItem is the individual item component used within a List. It renders as a li element by default and accepts all Box system props for flexible styling.

Key Props:

isBordered: When true, adds a border and padding to create a card-like appearance
children: The content to display within the list item

ListItem can contain any React nodes, from simple text to complex components like ListItemContent, Message, or custom styled elements.

ListItemContent

ListItemContent is a helper component for creating structured list items with a consistent layout. It's perfect for notifications, activity feeds, or any list where items have a title, optional details, and optional actions.

Key Props:

text: Main text displayed as SmallSubheadline (required)
details: Additional text displayed as Byline below the main text
aside: Text displayed on the right side (often used for dates or metadata)
iconName: Optional icon displayed on the left
iconLabel: Accessible label for the icon when not accompanied by visible text
actions: Action buttons or menus displayed on the right side

import { List,ListItem,ListItemContent } from '@sproutsocial/racine'

<List>
  <ListItem>
    <ListItemContent
      iconName="star-solid"
      iconLabel="Favorite"
      text="Complete item with all props"
      details="This shows all available props in action"
      aside="Just now"
      actions={
        <Button appearance="unstyled" aria-label="More options">
          <Icon name="ellipsis-horizontal-outline" size="small" aria-hidden />
        </Button>
      }
    />
  </ListItem>
</List>

Accessibility

List uses semantic HTML (ul or ol elements) for proper screen reader support
ListItem renders as a li element
When using icons without accompanying text in ListItemContent, always provide an iconLabel for screen readers
Action buttons should include proper aria-label attributes when they don't contain visible text