Simple Table

Lista key-value com borda esquerda accent. Label à esquerda, valor à direita, gap fixo de 56px. Variantes: padrão, com botão, com badge, com descrição. Dark mode automático via tokens semânticos.

components/simple-table.cssAbrir no Figma

Variantes

Quatro variantes: padrão, com botão de ação, com badges e com descrição.

Carregando exemplo...

Propriedades

Classes disponíveis para configurar a tabela.

Propriedade	Tipo	Default	Descrição
.simple-table	classe	—	Container da tabela (width fit-content).
.simple-table-header	classe	—	Header com título + botão opcional.
.simple-table-title	classe	—	Título da tabela (p3 medium).
.simple-table-body	classe	—	Container das linhas.
.simple-table-row	classe	—	Linha com borda esquerda, padding 12px 0 12px 20px, gap 56px.
.simple-table-label	classe	—	Label (p4 regular, secondary). Largura pelo conteúdo.
.simple-table-value	classe	—	Valor (p3 medium, default).
.simple-table-value-group	classe	—	Container para valor + descrição (variante com descrição).
.simple-table-description	classe	—	Texto de descrição abaixo do valor (p4 regular, secondary).

Código

Snippets prontos para copiar e usar.

Padrão

<div class="simple-table">
    <span class="simple-table-title">Título</span>
    <div class="simple-table-body">
        <div class="simple-table-row">
            <span class="simple-table-label">Rótulo</span>
            <span class="simple-table-value">Valor</span>
        </div>
    </div>
</div>

Com botão

<div class="simple-table">
    <div class="simple-table-header">
        <span class="simple-table-title">Título</span>
        <button class="btn btn-outlined btn-sm">Botão</button>
    </div>
    <div class="simple-table-body">
        <!-- linhas -->
    </div>
</div>

Com badge

<div class="simple-table-row">
    <span class="simple-table-label">Rótulo</span>
    <div class="simple-table-value" style="display: flex; gap: 12px;">
        <span class="badge badge--outline badge--sm">Badge 1</span>
        <span class="badge badge--outline badge--sm">Badge 2</span>
    </div>
</div>

Com descrição

<div class="simple-table-row">
    <span class="simple-table-label">Rótulo</span>
    <div class="simple-table-value-group">
        <span class="simple-table-value">Valor</span>
        <span class="simple-table-description">Descrição</span>
    </div>
</div>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--text-base-neutral-default	Cor do título e valor
--text-base-neutral-secondary	Cor do label e descrição
--border-base-neutral-default	Borda esquerda das linhas
--spacing-3	Padding vertical / gap título (12px)

Versão3.0.0

Última atualização2026-03-19

Caminhocomponentes/simple-table.md