UX/UI — Fundamentos

Copiar<!-- Botão Primário --> <button class="btn btn-primary btn-lg">Ação Principal</button> <button class="btn btn-primary">Ação Principal</button> <button class="btn btn-primary btn-sm">Ação Principal</button> <!-- Botão Secundário --> <button class="btn btn-secondary">Ação Secundária</button> <!-- Botão Ghost --> <button class="btn btn-ghost">Ação Terciária</button>

Copiar.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; transition: all 0.18s; } .btn-primary { background: #2B6CB0; color: #FFFFFF; box-shadow: 0 2px 8px rgba(43,108,176,0.3); } .btn-secondary { background: transparent; color: #2B6CB0; border-color: #2B6CB0; } .btn-ghost { background: transparent; color: #475569; border-color: #E2E8F0; } .btn-sm { padding: 0.45rem 1.1rem; font-size: 0.75rem; } .btn-lg { padding: 0.875rem 2rem; font-size: 0.9rem; }

Copiar<div class="form-group"> <label for="company">Nome da Empresa</label> <input type="text" id="company" placeholder="Ex: Indústria ABC Ltda"> </div> <div class="form-group"> <label for="module">Módulo</label> <select id="module"> <option>Selecione um módulo</option> <option>Gestão de Estoque</option> </select> </div>

Copiar.form-group { display: flex; flex-direction: column; gap: 0.4rem; max-width: 380px; margin: 1rem 0; } .form-group label { font-size: 0.78rem; font-weight: 600; color: #0F172A; } .form-group input, .form-group select { padding: 0.65rem 1rem; border: 1.5px solid #E2E8F0; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: #1E293B; outline: none; transition: all 0.18s; } .form-group input:focus, .form-group select:focus { border-color: #3A8FD6; box-shadow: 0 0 0 3px rgba(58,143,214,0.12); }

Copiar<div class="card"> <h4>Gestão de Estoque</h4> <p>Controle inteligente de entradas, saídas e posições em tempo real.</p> <button class="btn btn-primary btn-sm"> Acessar Módulo </button> </div>

Copiar.card { border: 1px solid #E2E8F0; border-radius: 20px; padding: 1.75rem 2rem; background: #FFFFFF; max-width: 380px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06); transition: all 0.25s cubic-bezier(0.4,0,0.2,1); } .card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.12); transform: translateY(-3px); } .card h4 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; } .card p { font-size: 0.875rem; color: #94A3B8; }

Copiar

<!-- Modal Overlay -->
<div class="modal-overlay" id="myModal">
  <div class="modal-container modal-md">

    <!-- Header -->
    <div class="modal-header">
      <h3>Título do Modal</h3>
      <button class="modal-close" aria-label="Fechar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>

    <!-- Body -->
    <div class="modal-body">
      <p>Conteúdo do modal aqui.</p>
    </div>

    <!-- Footer -->
    <div class="modal-footer">
      <button class="btn-secondary-sm">Cancelar</button>
      <button class="btn-primary-sm">Confirmar</button>
    </div>

  </div>
</div>

<!-- Tamanhos: modal-sm | modal-md | modal-lg | modal-full -->

<!-- Dialog de Confirmação -->
<div class="modal-overlay">
  <div class="modal-container modal-sm">
    <div class="modal-body" style="text-align:center; padding-top:2rem;">
      <div class="modal-icon modal-icon-warning">!</div>
      <h3>Tem certeza?</h3>
      <p>Esta ação não pode ser desfeita.</p>
    </div>
    <div class="modal-footer" style="justify-content:center;">
      <button class="btn-secondary-sm">Cancelar</button>
      <button class="btn-danger-sm">Excluir</button>
    </div>
  </div>
</div>

<!-- Dialog de Alerta / Sucesso -->
<div class="modal-overlay">
  <div class="modal-container modal-sm">
    <div class="modal-body" style="text-align:center; padding-top:2rem;">
      <div class="modal-icon modal-icon-success">✓</div>
      <h3>Operação concluída</h3>
      <p>Os dados foram salvos com sucesso.</p>
    </div>
    <div class="modal-footer" style="justify-content:center;">
      <button class="btn-primary-sm">OK</button>
    </div>
  </div>
</div>

Copiar

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal Container */
.modal-container {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15),
              0 2px 12px rgba(0,0,0,0.08);
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.25s ease;
}

/* Tamanhos */
.modal-sm  { max-width: 400px; }
.modal-md  { max-width: 560px; }
.modal-lg  { max-width: 720px; }
.modal-full { max-width: 95vw; max-height: 95vh; }

/* Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #E2E8F0;
}

.modal-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.modal-close {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center;
  justify-content: center; color: #64748B;
  transition: all 0.15s;
}
.modal-close:hover {
  background: #F1F5F9; color: #0F172A;
}
.modal-close svg { width: 18px; height: 18px; }

/* Body */
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Footer */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #E2E8F0;
}

/* Icon para Dialogs */
.modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  margin: 0 auto 1rem;
}
.modal-icon-warning {
  background: #FEF3C7; color: #D97706;
}
.modal-icon-success {
  background: #D1FAE5; color: #059669;
}
.modal-icon-danger {
  background: #FEE2E2; color: #DC2626;
}
.modal-icon-info {
  background: #DBEAFE; color: #2B6CB0;
}

/* Botão Danger */
.btn-danger-sm {
  padding: 8px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  border: none; border-radius: 8px;
  background: #DC2626; color: #FFFFFF;
  cursor: pointer; transition: all 0.15s;
}
.btn-danger-sm:hover { background: #C53030; }

Copiar

<!-- Toast Container (posição fixa) -->
<div class="toast-container" role="alert" aria-live="polite">

  <!-- Toast Sucesso -->
  <div class="toast toast-success">
    <div class="toast-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </div>
    <div class="toast-content">
      <strong>Sucesso</strong>
      <span>Produto cadastrado com sucesso.</span>
    </div>
    <button class="toast-close" aria-label="Fechar">&times;</button>
    <div class="toast-progress"></div>
  </div>

  <!-- Toast Erro -->
  <div class="toast toast-error">...</div>

  <!-- Toast Aviso -->
  <div class="toast toast-warning">...</div>

  <!-- Toast Info -->
  <div class="toast toast-info">...</div>

</div>

<!-- Banner de Alerta (inline, persistente) -->
<div class="alert-banner alert-warning">
  <div class="alert-icon">⚠</div>
  <div class="alert-content">
    <strong>Atenção:</strong>
    Sua licença expira em 7 dias.
    <a href="#">Renovar agora</a>
  </div>
  <button class="alert-dismiss">&times;</button>
</div>

Copiar

/* Toast Container */
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
}

/* Toast Base */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #FFFFFF;
  border-left: 4px solid;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12),
              0 1px 4px rgba(0,0,0,0.06);
  animation: toastSlideIn 0.3s ease;
  position: relative;
  overflow: hidden;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* Variantes */
.toast-success { border-color: #059669; }
.toast-error   { border-color: #DC2626; }
.toast-warning { border-color: #D97706; }
.toast-info    { border-color: #2B6CB0; }

/* Ícone */
.toast-icon {
  width: 24px; height: 24px;
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center;
  justify-content: center;
}
.toast-icon svg { width: 16px; height: 16px; }

.toast-success .toast-icon { background: #D1FAE5; color: #059669; }
.toast-error .toast-icon   { background: #FEE2E2; color: #DC2626; }
.toast-warning .toast-icon { background: #FEF3C7; color: #D97706; }
.toast-info .toast-icon    { background: #DBEAFE; color: #2B6CB0; }

/* Alert Banners (inline) */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 10px;
  border: 1px solid;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
}
.alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alert-error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.alert-info    { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }

Copiar

<div class="table-wrapper">
  <table class="data-table">
    <thead>
      <tr>
        <th><input type="checkbox" class="table-check" /></th>
        <th class="sortable">Código <span class="sort-icon">&#x25B4;&#x25BE;</span></th>
        <th class="sortable active-sort">Produto <span class="sort-icon">&#x25B4;</span></th>
        <th>Categoria</th>
        <th class="text-right">Estoque</th>
        <th class="text-right">Preço</th>
        <th>Status</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="table-check" /></td>
        <td class="text-mono">#LED-001</td>
        <td><strong>Painel Solar 200W</strong></td>
        <td>Energia Solar</td>
        <td class="text-right">1.240</td>
        <td class="text-right">R$ 489,90</td>
        <td><span class="badge badge-success">Ativo</span></td>
        <td><button class="table-action">•••</button></td>
      </tr>
    </tbody>
  </table>
</div>

Copiar

/* Table Wrapper */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
}

.data-table thead {
  background: #F8FAFC;
  border-bottom: 2px solid #E2E8F0;
}

.data-table th {
  padding: 0.75rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: #2B6CB0; }
.active-sort { color: #2B6CB0; }

.data-table td {
  padding: 0.75rem 1rem;
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge-success { background: #D1FAE5; color: #059669; }
.badge-warning { background: #FEF3C7; color: #D97706; }
.badge-error   { background: #FEE2E2; color: #DC2626; }
.badge-info    { background: #DBEAFE; color: #2B6CB0; }
.badge-neutral { background: #F1F5F9; color: #64748B; }

Copiar

<!-- Tabs Underline (padrão) -->
<div class="tabs-container">
  <nav class="tabs tabs-underline" role="tablist">
    <button class="tab active" role="tab"
            aria-selected="true" aria-controls="panel-1">
      Visão Geral
    </button>
    <button class="tab" role="tab"
            aria-selected="false" aria-controls="panel-2">
      Estoque
    </button>
    <button class="tab" role="tab"
            aria-selected="false" aria-controls="panel-3">
      Histórico
    </button>
    <button class="tab disabled" role="tab"
            aria-disabled="true">
      Relatórios
    </button>
  </nav>
  <div class="tab-panel active" id="panel-1" role="tabpanel">
    <!-- Conteúdo da aba -->
  </div>
</div>

<!-- Tabs Pill -->
<nav class="tabs tabs-pill" role="tablist">
  <button class="tab active">Todos</button>
  <button class="tab">Ativos</button>
  <button class="tab">Inativos</button>
</nav>

<!-- Tabs Boxed -->
<nav class="tabs tabs-boxed" role="tablist">
  <button class="tab active">Mensal</button>
  <button class="tab">Trimestral</button>
  <button class="tab">Anual</button>
</nav>

<!-- Tabs com Ícone + Badge -->
<nav class="tabs tabs-underline" role="tablist">
  <button class="tab active">
    <svg>...</svg> Pedidos
    <span class="tab-badge">12</span>
  </button>
  <button class="tab">
    <svg>...</svg> Devoluções
    <span class="tab-badge">3</span>
  </button>
</nav>

Copiar

/* Tabs Container */
.tabs-container { width: 100%; }

/* Tabs Nav Base */
.tabs {
  display: flex; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* Tab Button Base */
.tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  color: #64748B; background: none;
  border: none; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
  position: relative;
}
.tab:hover { color: #2B6CB0; }
.tab.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Underline Variant */
.tabs-underline { border-bottom: 2px solid #E2E8F0; }
.tabs-underline .tab { margin-bottom: -2px; border-bottom: 2px solid transparent; }
.tabs-underline .tab.active { color: #2B6CB0; border-bottom-color: #2B6CB0; }

/* Pill Variant */
.tabs-pill { background: #F1F5F9; border-radius: 10px; padding: 4px; gap: 4px; }
.tabs-pill .tab { border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.75rem; }
.tabs-pill .tab.active { background: #FFFFFF; color: #0F172A; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Boxed Variant */
.tabs-boxed { border: 1.5px solid #E2E8F0; border-radius: 10px; padding: 4px; gap: 0; display: inline-flex; }
.tabs-boxed .tab { border-radius: 8px; padding: 0.5rem 1.25rem; font-size: 0.75rem; }
.tabs-boxed .tab.active { background: #2B6CB0; color: #FFFFFF; }

/* Tab Badge */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 99px;
  font-size: 0.65rem; font-weight: 700;
  background: #EFF6FF; color: #2B6CB0; padding: 0 5px;
}
.tab.active .tab-badge { background: #2B6CB0; color: #FFFFFF; }