MODULO 2.2

🧩 Componentes UI Essenciais

Os blocos de construcao de interfaces modernas. Domine botoes, forms, cards, navegacao, feedback e data display - os padroes universais que toda IA conhece e implementa perfeitamente.

6
Topicos
30
Minutos
Medio
Nivel
Pratico
Tipo
1

🔘 Botoes

Botoes sao os elementos de acao mais importantes de uma interface. Eles guiam o usuario para conversoes, navegacao e interacoes. Dominar variantes de botao e essencial para criar hierarquias de acao claras.

💡 Variantes de Botao

Primary - Acao principal, CTA, destaque maximo
Secondary - Acao alternativa, menos enfase
Ghost - Discreto, apenas texto, acoes terciarias
Outline - Borda visivel, fundo transparente

📏 Tamanhos de Botao

Use tamanhos consistentes: sm para acoes densas, md para padrao, lg para CTAs hero

🔄 Estados do Botao

Normal
:hover / :focus
:active
:disabled

🎯 Vocabulario para Prompts (Vibe Coding)

Ao criar com IA, use termos como:

botao primary com hover state button variants: primary, secondary, ghost, outline botao com focus ring acessivel button sizes: sm, md, lg disabled state com opacity reduzida icon button circular
2

📝 Forms e Inputs

Formularios sao onde usuarios fornecem dados e tomam decisoes. Um form bem projetado aumenta conversao e reduz erros. Cada tipo de input serve um proposito especifico.

📋 Tipos de Input

Entrada de texto livre - nomes, emails, etc.

Escolha unica entre opcoes predefinidas

Multiplas selecoes permitidas

Apenas uma selecao possivel

✅ Estados de Validacao

Email valido!

Formato de email invalido

🎯 Vocabulario para Prompts (Vibe Coding)

input com label e placeholder form field com validation states error message em vermelho abaixo do input select dropdown com opcoes checkbox group para multipla selecao radio buttons para selecao unica floating label input
3

🃏 Cards

Cards sao containers visuais que agrupam informacao relacionada. Sao os blocos fundamentais de interfaces modernas - de dashboards a e-commerce a redes sociais.

🔬 Anatomia de um Card

Imagem / Media Header
Badge Metadata

Titulo do Card

Descricao breve do conteudo do card. Mantenha conciso.

✨ Shadow e Hover Effects

Flat

Sem sombra, apenas borda

border: 1px solid

Elevated

Sombra para profundidade

shadow-lg

Interactive

Hover para interagir!

hover:shadow-xl hover:-translate-y-1

📐 Cards em Grid

📦

Card 1

Conteudo do card

🎯

Card 2

Conteudo do card

⚡

Card 3

Conteudo do card

🎯 Vocabulario para Prompts (Vibe Coding)

card com imagem no topo e padding interno card com shadow-lg e hover elevado card grid responsivo: 1 col mobile, 3 cols desktop card com borda e hover:border-color card com header, body e footer
4

🧭 Navigation Components

Navegacao e a espinha dorsal da experiencia do usuario. Componentes de navegacao bem projetados permitem que usuarios encontrem o que precisam rapidamente.

📌 Navbar (Barra de Navegacao)

Padrao: Logo a esquerda, links centralizados ou a direita, CTA no canto direito

📑 Tabs (Abas)

Conteudo da tab ativa aparece aqui. Tabs sao otimas para organizar conteudo relacionado em um espaco compacto.

🔗 Breadcrumbs (Trilha de Navegacao)

Home / Categoria / Pagina Atual
Home Categoria Pagina Atual

Breadcrumbs mostram a localizacao do usuario na hierarquia do site

🎯 Vocabulario para Prompts (Vibe Coding)

navbar sticky com logo, links e CTA tabs com underline na tab ativa breadcrumb com separador chevron mobile menu hamburger sidebar navigation com icones dropdown menu on hover
5

🔔 Feedback Components

Componentes de feedback comunicam status e informacoes importantes ao usuario. Desde alertas persistentes ate notificacoes temporarias, eles mantem o usuario informado.

⚠️ Alerts (Alertas)

Info: Mensagem informativa para o usuario.
Sucesso: Operacao realizada com sucesso!
Aviso: Atencao, verifique antes de continuar.
Erro: Algo deu errado. Tente novamente.

🍞 Toasts / Snackbars

✓ Item salvo com sucesso
ℹ Nova mensagem recebida

Notificacoes temporarias que desaparecem automaticamente

🪟 Modals / Dialogs

Confirmar acao?

Esta acao nao pode ser desfeita.

Overlays que requerem acao do usuario

💬 Tooltips

Tooltip no topo
Informacao adicional

Tooltips fornecem informacao contextual on hover

🎯 Vocabulario para Prompts (Vibe Coding)

alert com icone, cores semanticas (success, error, warning) toast notification no canto inferior direito modal centralizado com backdrop escuro tooltip on hover com seta confirmation dialog com botoes cancelar/confirmar
6

📊 Data Display

Componentes de data display apresentam informacao de forma clara e escaneavel. Tables para dados tabulares, lists para itens, badges para status.

📋 Tables (Tabelas)

Nome Status Role Acoes
JD
John Doe
Ativo Admin
AS
Ana Silva
Pendente Editor
MP
Maria Pereira
Inativo Viewer

📜 Lists (Listas)

Lista Simples

  • Item 1 →
  • Item 2 →
  • Item 3 →

Lista com Descricao

  • •
    Titulo do item
    Descricao breve
  • •
    Outro item
    Mais detalhes aqui

🏷️ Badges e Tags

Status Badges

Ativo Pendente Inativo Em progresso Revisao

Category Tags

Design Frontend UI/UX React

Notification Badges

3
12

🎯 Vocabulario para Prompts (Vibe Coding)

table com header sticky e row hover list com avatar e metadata status badge com cores semanticas tag chips removiveis notification badge com contador data grid com sorting e filtering

📝 Resumo do Modulo

✓
Botoes - Primary, secondary, ghost, outline. Tamanhos e estados (hover, focus, disabled)
✓
Forms e Inputs - Text, select, checkbox, radio. Estados de validacao (success, error)
✓
Cards - Estrutura (header, body, footer), shadows, hover effects, grids de cards
✓
Navigation - Navbar, tabs, breadcrumbs. Padroes de navegacao
✓
Feedback - Alerts, toasts, modals, tooltips. Comunicacao de status ao usuario
✓
Data Display - Tables, lists, badges, tags. Apresentacao clara de informacoes

Proximo Modulo:

2.3 - Sistemas de Grid: A estrutura invisivel que organiza tudo

← Modulo Anterior Proximo Modulo →