Row
Rows alinham elementos horizontalmente, controlando distribuição e espaçamento entre ações, títulos e métricas.
Quando usar
- Exibir botões lado a lado com espaçamento uniforme.
- Criar cabeçalhos com título à esquerda e ação à direita.
- Centralizar mensagens ou estados vazios na horizontal.
- Agrupar ações de confirmação no rodapé de cards e modais.
Exemplo básico
Rodapé de card com ações alinhadas
Por quê: concentra as ações relacionadas ao bloco em uma mesma faixa horizontal.
Variantes
Row padrão
Quando usar: alinhar ações no início do container com espaçamento consistente. Por quê: garante distância uniforme entre botões adjacentes.
Row-between para título + ação
Quando usar: distribuir elementos nos extremos mantendo equilíbrio visual. Por quê: separa foco textual da ação sem exigir colunas extras.
Row-center para estados
Quando usar: centralizar ações em estados vazios ou mensagens temporárias. Por quê: chama atenção para a ação de recuperação em telas sem conteúdo.
Composição (usando com outros)
- Row + Stack — combina textos e ações vertical/horizontal na mesma seção.
- Row + Card — posiciona footers com botões consistentes.
- Row + Modal — alinha ações finais de confirmação ou cancelamento.
Header com row-between e stack interno
Por quê: entrega contexto textual e ação no mesmo nível hierárquico.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
row | alinhamento padrão | row | Alinha itens na horizontal com espaçamento uniforme. | Não |
row-start, row-center, row-between, row-end | variações | — | Controlam alinhamento inicial, central, distribuído ou à direita. | Não |
conteúdo interno | blocos DSL | — | Botões, cards, textos ou componentes posicionados na mesma linha. | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Row redundante
✅ Correto — Distribuição direta
Por quê: evitar rows aninhados mantém o layout previsível e simples de manter.
❌ Errado — Botões empilhados sem alinhamento
✅ Correto — Ações alinhadas
Por quê: rows garantem espaçamento consistente e hierarquia clara entre ações.
Referências cruzadas
Relacionados
Stack: organiza conteúdos verticais antes de distribuí-los em uma row.Card: usa rows em rodapés e cabeçalhos.Modal: alinhamento padrão para botões de confirmação.Button: elemento mais comum dentro de rows.
Composições recomendadas
- Row + Card → rodapé com ações agrupadas.
- Row-between + Stack → cabeçalhos com contexto e CTA.
- Row-end + Modal → confirmações com foco na ação principal.
Modal com row-end
Por quê: row-end destaca a ação principal sem perder a opção de cancelamento.