List

List can be used to display a list of items with List.Item as children.

List can be used to display a list of items with List.Item as children.

API Reference

Props

List

Name
Type
Default
Description

children*

React.ReactElement<ListItemProps>[]

The content of the list.

List.Item

Name
Type
Default
Description

type*

ListType

The type of the list item.

title*

string

The title of the list item.

subtitle*

string

The subtitle of the list item.

icon

IconEnum

The icon of the list item.

image

string

The image of the list item.

additional

string

The additional content of the list item.

count

{ value: number; icon: IconEnum; }

The count of the list item.

actions

ActionsProps

The actions for the list item.

Examples

Basic

import { Section, Header, List } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
        />
      </List>
    </Block>
  );
}

With additional content

import { Section, Header, List, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
          additional="Additional content"
        />
      </List>
    </Block>
  );
}

With actions

import { Section, Header, List, Button } from "@stagehq/ui";

export default function Extension() {
  return (
    <Block>
      <List>
        <List.Item
          title="Project 1"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
        <List.Item
          title="Project 2"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
        <List.Item
          title="Project 3"
          subtitle="Subtitle"
          icon="PlayIcon"
          actions={{ open: { url: "https://getstage.app" }}}
        />
      </List>
    </Block>
  );
}

Types

ListType

type ListType = "card" | "text" | "bullet" | "cover";

Supported list types for the List.Item component.

Last updated