Pharos
Navegar componentes
← Componentes

List

ListExemplo
Coleção vertical de itens com espaçamento, divisores e marcadores opcionais consistentes. Suporta headers, ícones, avatares, badges e itens interativos com comportamento de clique ou link. Use para exibir grupos ordenados ou não ordenados de conteúdo relacionado.
Importação
import {List} from '@pharos-ds/core/List';

Exemplos

Área interativa

density
hasDividers
listStyle
Itens
  • Primeiro itemDescrição breve
  • Segundo item
  • Terceiro item
Código
import {List} from '@pharos-ds/core/List';

<List
  density="balanced"
  hasDividers={false}
  listStyle="none"
 />

Boas práticas

  • Faça: Forneça um header para rotular a lista e dar contexto a leitores de tela.
  • Faça: Use slots start e end content para adicionar ícones, avatares ou badges a cada item.
  • Evite: Coloque elementos interativos dentro de um list item interativo; isso cria alvos de clique aninhados e comportamento de foco confuso.
  • Evite: Use uma lista para um único item ou para layout de conteúdo não relacionado; listas implicam uma coleção significativa.
  • Evite: Misture itens clicáveis e não clicáveis na mesma lista sem distinção visual clara.

Props

PropTipoPadrãoDescrição
childrenReactNode—Itens da lista (componentes ListItem).
density'compact' | 'balanced' | 'spacious''balanced'Densidade de espaçamento dos itens.
hasDividersbooleanfalseMostra divisores entre itens.
headerReactNode—Conteúdo do header, associado à lista via aria-labelledby.
listStyle'none' | 'disc' | 'decimal' | 'circle''none'Estilo de marcador da lista. 'decimal' renderiza um elemento <ol> em vez de <ul>.
startnumber1Número inicial para listas ordenadas (listStyle='decimal'). Define o contador CSS para começar neste valor.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(): não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/List
List · Pharos