componentes / list

List

Lista semântica de itens com título, descrição e elementos no início e no fim.

Como usar

`List` renderiza um `<ul>` (`divided` desenha linhas entre os itens); `ListItem` recebe `title`, `description`, `leading` (ex.: um Avatar), `trailing` (ex.: um Badge ou botão) e `children` extras. A lista não é interativa: coloque um link ou botão em `title` ou `trailing`.

preview

Camila Souza
Designer de produto
Ativa
Yuki Tanaka
Engenheiro
Pendente

List.tsx

import { List, ListItem, Avatar, Badge } from "vaiperui";
 
<List divided>
  <ListItem
    leading={<Avatar name="Camila Souza" />}
    title="Camila Souza"
    description="Designer de produto"
    trailing={<Badge status="success">Ativa</Badge>}
  />
</List>

Com divisórias

preview

Camila Souza
Designer
Yuki Tanaka
Engineer

divided

divisorias.tsx

<List divided>
  <ListItem title="Camila Souza" description="Designer" />
  <ListItem title="Yuki Tanaka" description="Engineer" />
</List>

Props

Prop	Valores	Padrão	Descrição
divided	boolean	false	Linha entre os itens (List)
title	ReactNode	obrigatório	Título do item (ListItem)
description	ReactNode	nenhum	Texto de apoio abaixo do título
leading	ReactNode	nenhum	Elemento antes do texto
trailing	ReactNode	nenhum	Elemento no fim da linha
(nativas)	ul / li	nenhum	Todas as props nativas do elemento, className, ref etc.