Navegar componentes

ListItem

MiscExemplo

Item de lista com label, description, slots start/end content e padrões interativos.

Importação

import {ListItem} from '@pharos-ds/core/ListItem';

Exemplos

Área interativa

isSelected

isDisabled

Item da listaDescrição do item

Código

import {ListItem} from '@pharos-ds/core/List';

<ListItem
  label="Item da lista"
  description="Descrição do item"
  isSelected={false}
  isDisabled={false}
 />

Props

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Texto principal.
`description`	`ReactNode`	—	Conteúdo secundário abaixo do label. Uma string simples recebe truncamento de linha única automaticamente; um ReactNode permite que componentes filhos controlem sua própria quebra e line-clamp.
`startContent`	`ReactNode`	—	Conteúdo renderizado antes da área do label (ex.: ícone, avatar).
`endContent`	`ReactNode`	—	Conteúdo renderizado após a área do label (ex.: badge, chevron).
`onClick`	`(e: MouseEvent) => void`	—	Handler de clique; habilita o padrão de botão invisível.
`href`	`string`	—	URL do link; habilita o padrão de âncora invisível.
`target`	`string`	—	Atributo target do link, aplicável apenas quando href é fornecido. target="_blank" adiciona automaticamente noopener noreferrer.
`rel`	`string`	—	Tokens de relação do link. noopener noreferrer são mesclados automaticamente para target="_blank".
`isDisabled`	`boolean`	`false`	Estado desabilitado; define aria-disabled no item.
`isSelected`	`boolean`	`false`	Estado selecionado; define aria-selected no item.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/ListItem