componentes / list

List

Lista semántica de elementos con título, descripción y elementos al inicio y al final.

Cómo usar

`List` renderiza un `<ul>` (`divided` dibuja líneas entre elementos); `ListItem` recibe `title`, `description`, `leading` (p. ej. un Avatar), `trailing` (p. ej. un Badge o botón) y `children` extra. La lista no es interactiva: pon un enlace o botón en `title` o `trailing`.

preview

Camila Souza
Diseñadora de producto
Activa
Yuki Tanaka
Ingeniero
Pendiente

List.tsx

import { List, ListItem, Avatar, Badge } from "vaiperui";
 
<List divided>
  <ListItem
    leading={<Avatar name="Camila Souza" />}
    title="Camila Souza"
    description="Diseñadora de producto"
    trailing={<Badge status="success">Activa</Badge>}
  />
</List>

Con divisores

preview

Camila Souza
Designer
Yuki Tanaka
Engineer

divided

divisores.tsx

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

Props

Prop	Valores	Predeterminado	Descripción
divided	boolean	false	Línea entre elementos (List)
title	ReactNode	obligatorio	Título del elemento (ListItem)
description	ReactNode	ninguno	Texto de apoyo bajo el título
leading	ReactNode	ninguno	Elemento antes del texto
trailing	ReactNode	ninguno	Elemento al final de la fila
(nativas)	ul / li	ninguno	Todas las props nativas del elemento, className, ref, etc.