Intro
O Tile é um componente de ação ampliada, utilizado para representar funcionalidades, módulos ou áreas de navegação dentro de uma central de sistema.
Ele combina:
- Ação
- Contexto
- Informação complementar
- Identidade visual
Diferente do Button, que representa uma ação pontual, o Tile representa um ponto de entrada estruturado, geralmente associado a:
- Módulos
- Sistemas
- Serviços internos
- Painéis administrativos
- Áreas funcionais
É classificado como:
- Componente de Ação Estrutural
- Elemento de Navegação Modular
- Unidade de Entrada de Sistema
Anatomia Visual
Estrutura Base
- Container
- Área clicável completa
- Pode ter variação sólida ou neutra
- Radius médio a alto
- Elevação sutil
- Ícone ou Elemento Visual
- Representação simbólica da ação
- Centralizado ou alinhado à esquerda
- Pode estar dentro de shape circular
- Label
- Nome da funcionalidade
- Texto principal
- Description
- Texto complementar
- Explica brevemente a ação
Anatomia Estrutural
1 — Container do Tile
2 — Ícone / Elemento gráfico
3 — Label (Título)
4 — Description (Descrição)
Estados
- Default
- Hover
- Focus
- Active
- Disabled
- Selected (quando aplicável)
Características
Comportamento
- Toda a área é clicável
- Direciona para:
- Nova página
- Módulo interno
- Fluxo específico
- Pode funcionar como
<a>ou<button>
Hierarquia de Uso
O Tile é mais indicado quando:
- A ação exige contextualização
- O sistema possui múltiplos módulos
- O usuário precisa identificar rapidamente funcionalidades
Responsividade
Desktop:
- Uso em grid (2, 3 ou 4 colunas)
- Tamanho médio a grande
Tablet:
- Redução de colunas
Mobile:
- 1 coluna
- Área de toque confortável (mínimo 44px altura de área clicável)
Quando Usar
- Central de sistemas
- Portais administrativos
- Home de painel interno
- Catálogo de serviços internos
- Módulos de sistema
Quando NÃO Usar
- Para ação simples (usar Button)
- Para navegação textual (usar Link)
- Para conteúdo informativo (usar Card)
- Para seleção exclusiva (usar Segment Button)
Variações
Tile Primário (Destaque)
- Background sólido
- Texto invertido
- Alto contraste
- Uso para módulo prioritário
Tile Neutro
- Background claro
- Texto escuro
- Uso padrão em grids
Tile Linked
- Background claro
- Texto Primário
- Uso padrão em grids quando exige um destaque sem ser primário
Tile Horizontal
- Ícone à esquerda
- Texto à direita
- Uso em listas de sistema
Boas Práticas
✅ Faça
- Use ícones consistentes
- Mantenha label claro e objetivo
- Use descrição curta (1–2 linhas)
- Mantenha espaçamento generoso
- Garanta contraste adequado
- Utilize grid consistente
❌ Não Faça
- Não sobrecarregue com múltiplos CTAs
- Não use texto longo
- Não misture hierarquias visuais dentro do mesmo grid
- Não use para ações destrutivas isoladas
- Não use como substituto de card informativo
Comparação com Componentes Relacionados
| Componente | Diferença |
|---|---|
| Button | Ação pontual e compacta |
| Card | Estrutura informacional mais rica |
| Link | Navegação textual simples |
| Segment Button | Alternância entre opções |
Erros Comuns
- Usar Tile para ação simples
- Colocar múltiplos botões dentro do Tile
- Excesso de texto
- Ícones inconsistentes
- Não tratar estados hover/focus
Resumo
O Tile é um componente de entrada modular que:
- Representa funcionalidades estruturais
- Organiza módulos em centrais de sistema
- Amplia clareza e escaneabilidade
- Oferece ação com contexto
Ele deve ser utilizado quando a ação exige presença visual maior e contextualização superior ao Button padrão.