List Group

Listas estilizadas com suporte a items ativos, desabilitados, clicáveis, cores contextuais, badges, ícones e layouts alternativos. Dark mode automático via variáveis semânticas.

components/list-group.css

Uso

Listas de items com interação e feedback visual. Mais estruturado que uma lista HTML nativa, menos complexo que uma table.

• Simples — Lista de opções, itens de navegação, resultados.
• Com badges — Contadores, status, quantidade de itens.
• Com ícones e descrição — Menus de navegação com ícone + título + subtexto.
• Cores contextuais — Sucesso, aviso, erro, informação.
• Flush — Sem bordas externas para uso dentro de cards ou painéis.
• Bordered — Borda colorida à esquerda indica status ou categoria.
• Horizontal — Items lado a lado para tags ou filtros.

Exemplos

Básico, estados, badges, cores, conteúdo rico, flush, bordered e horizontal.

Carregando exemplo...

Anatomia

Estrutura interna do componente.

Parte	Elemento	Descrição
Container	.list-group	<ul> ou <div> flex column com border-radius
Item	.list-group__item	<li>, <a> ou <button> com padding e borda
Ícone	.list-group__icon	Container para ícone à esquerda (20×20)
Conteúdo	.list-group__content	Wrapper flex-1 para título e texto
Título	.list-group__title	Texto principal (medium weight)
Texto	.list-group__text	Descrição secundária (13px)
Badge	.badge	Componente Badge existente — alinha à direita via auto margin

Propriedades

Classes, estados e atributos disponíveis.

Propriedade	Tipo	Default	Descrição
.list-group	classe	—	Container da lista (flex column, sem list-style).
.list-group__item	classe	—	Item individual com padding, borda e fundo.
.list-group__item--action	classe	—	Item clicável com hover e cursor pointer.
.list-group__item--active	estado	—	Item ativo — fundo e texto brand, borda destacada.
.list-group__item--disabled	estado	—	Item desabilitado — opacidade reduzida, sem interação.
.list-group__item--success	classe	—	Item contextual verde — aprovado, concluído.
.list-group__item--warning	classe	—	Item contextual amarelo — pendente, em análise.
.list-group__item--danger	classe	—	Item contextual vermelho — erro, reprovado.
.list-group__item--info	classe	—	Item contextual azul — informativo.
.list-group__icon	classe	—	Ícone à esquerda do item (20×20).
.list-group__content	classe	—	Wrapper do conteúdo principal (flex 1).
.list-group__title	classe	—	Título do item (medium weight).
.list-group__text	classe	—	Texto secundário (13px, cor secondary).
.list-group--flush	classe	—	Remove bordas externas e border-radius.
.list-group--horizontal	classe	—	Items lado a lado em vez de empilhados.
.list-group--bordered	classe	—	Borda colorida à esquerda indica status.

Código

Snippets prontos para copiar e usar.

Básico

<ul class="list-group">
  <li class="list-group__item">Primeiro item</li>
  <li class="list-group__item">Segundo item</li>
  <li class="list-group__item">Terceiro item</li>
</ul>

Com estados

<ul class="list-group">
  <li class="list-group__item list-group__item--active">Ativo</li>
  <li class="list-group__item list-group__item--action">Clicável</li>
  <li class="list-group__item list-group__item--disabled">Desabilitado</li>
</ul>

Com badges

<ul class="list-group">
  <li class="list-group__item list-group__item--action">
    Caixa de entrada
    <span class="badge badge--accent">14</span>
  </li>
  <li class="list-group__item list-group__item--action">
    Enviados
    <span class="badge badge--neutral">3</span>
  </li>
</ul>

Conteúdo rico (ícone + título + descrição + badge)

<ul class="list-group">
  <li class="list-group__item list-group__item--action">
    <span class="list-group__icon">
      <svg><!-- ícone --></svg>
    </span>
    <span class="list-group__content">
      <span class="list-group__title">Produtores</span>
      <span class="list-group__text">Cadastro e consulta</span>
    </span>
    <span class="badge badge--accent">248</span>
  </li>
</ul>

Cores contextuais

<ul class="list-group">
  <li class="list-group__item list-group__item--success">Aprovado</li>
  <li class="list-group__item list-group__item--warning">Pendente</li>
  <li class="list-group__item list-group__item--danger">Reprovado</li>
  <li class="list-group__item list-group__item--info">Informativo</li>
</ul>

Flush (sem bordas externas)

<ul class="list-group list-group--flush">
  <li class="list-group__item">Item</li>
  <li class="list-group__item">Item</li>
</ul>

Bordered (indicador lateral)

<ul class="list-group list-group--bordered">
  <li class="list-group__item list-group__item--active">Brand</li>
  <li class="list-group__item list-group__item--success">Sucesso</li>
  <li class="list-group__item list-group__item--warning">Aviso</li>
  <li class="list-group__item list-group__item--danger">Erro</li>
</ul>

Horizontal

<ul class="list-group list-group--horizontal">
  <li class="list-group__item list-group__item--active">Todos</li>
  <li class="list-group__item list-group__item--action">Bovinos</li>
  <li class="list-group__item list-group__item--action">Suínos</li>
</ul>

Design

Especificações visuais e tokens utilizados.

Especificações

Propriedade	Valor
Border radius	var(--radius-md) (8px)
Item padding	12px 16px
Item font-size	14px
Item gap	12px (entre ícone, conteúdo e badge)
Ícone	20×20
Texto secundário	13px

Tokens utilizados

Estado	Background	Borda	Texto
Default	--surface-base-neutral-container-default	--border-base-neutral-default	--text-base-neutral-default
Hover	--surface-base-neutral-container-hover	—	—
Active	--surface-base-brand-container-low	--border-base-brand-default	--text-base-brand-default
Success	--surface-base-success-container-low	—	--text-base-success-default
Warning	--surface-base-warning-container-low	—	--text-base-warning-default
Danger	--surface-base-error-container-low	—	--text-base-error-default

Dark Mode

O componente inverte automaticamente via tokens semânticos. Cores contextuais e estados são preservados.

Versão0.2.0

Última atualização15 mar 2026

Caminhosrc/components/list-group.css