Elementos Componentes

O que é

Apresenta a harmonia visual e a identidade de todos os blocos de construção essenciais de interface do SWCore consumindo diretamente os tokens de cor do tema: Primária, Secundária, Sucesso, Erro, Alerta, Info, Vidro HUD (Glassmorphism) e Gradientes.

Como funciona

Puro CSS e utilitários do Tailwind v4. Todos os elementos derivam diretamente das variáveis do `@theme` (`--color-primary`, `--color-secondary`, `--surface`, etc.), garantindo que ao trocar a identidade visual, todo o kit de componentes se transforme instantaneamente.

Exemplos

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <button sw-btn class="sw-btn-pri">Primary</button>
  <button sw-btn class="sw-btn-sec">Secondary</button>
  <button sw-btn class="sw-btn-suc">Success</button>
  <button sw-btn class="sw-btn-war">Warning</button>
  <button sw-btn class="sw-btn-err">Error</button>
  <button sw-btn class="sw-btn-inf">Info</button>
  <button sw-btn class="sw-btn-nit">Night</button>
  <button sw-btn class="sw-btn-lit">Light</button>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <button sw-btn class="sw-btn-pri">Sólido</button>
  <button sw-btn class="sw-btn-out">Outline</button>
  <button sw-btn class="sw-btn-gst">Ghost</button>
  <button sw-btn class="sw-btn-soft">Soft / Tonal</button>
  <button sw-btn class="sw-btn-gls">Glass HUD</button>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <button sw-btn class="sw-btn-grad">Gradiente</button>
  <button sw-btn class="sw-btn-pri sw-btn-glow">Glow Primary</button>
  <button sw-btn class="sw-btn-sec sw-btn-glow">Glow Secondary</button>
  <button sw-btn class="sw-btn-pri sw-btn-shine">Efeito Shimmer</button>
  <button sw-btn class="sw-btn-pri sw-btn-arrow">Começar Agora <i class="swi-right-arrow-alt"></i></button>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <button sw-btn class="sw-btn-gls">Primary</button>
  <button sw-btn class="sw-btn-gls sw-btn-sec">Secondary</button>
  <button sw-btn class="sw-btn-gls sw-btn-ale">Alert</button>
  <button sw-btn class="sw-btn-gls sw-btn-suc">Success</button>
  <button sw-btn class="sw-btn-gls sw-btn-dan">Danger</button>
  <button sw-btn class="sw-btn-gls sw-btn-nit">Night</button>
  <button sw-btn class="sw-btn-gls sw-btn-lit">Light</button>
</div>

<div class="demo-row" style="flex-wrap:wrap; gap:0.6rem;">
  <span sw-chip class="sw-btn-pri">Primary</span>
  <span sw-chip class="sw-btn-sec">Secondary</span>
  <span sw-chip class="sw-btn-ale">Alert</span>
  <span sw-chip class="sw-btn-suc">Success</span>
  <span sw-chip class="sw-btn-dan">Danger</span>
  <span sw-chip class="sw-btn-nit">Night</span>
  <span sw-chip class="sw-btn-lit">Light</span>
  <span sw-chip class="sw-btn-soft sw-btn-pri">Soft Pri</span>
  <span sw-chip class="sw-btn-soft sw-btn-suc">Soft Suc</span>
  <span sw-chip class="sw-btn-soft sw-btn-dan">Soft Dan</span>
  <span sw-chip class="sw-btn-gls">Glass Tag</span>
</div>

<div style="display:grid; gap:0.85rem; width:100%;">
  <div class="sw-alert ok">
    <i class="sw-alert-ico swi-check-circle"></i>
    <div class="sw-alert-body">
      <div class="sw-alert-ttl">Sucesso</div>
      <div class="sw-alert-msg">Operação concluída com sucesso — todas as alterações foram salvas.</div>
    </div>
  </div>
  <div class="sw-alert ale">
    <i class="sw-alert-ico swi-alarm-exclamation"></i>
    <div class="sw-alert-body">
      <div class="sw-alert-ttl">Atenção</div>
      <div class="sw-alert-msg">Sua assinatura expira em 3 dias. Renove para manter o acesso aos recursos.</div>
    </div>
  </div>
  <div class="sw-alert err">
    <i class="sw-alert-ico swi-error-circle"></i>
    <div class="sw-alert-body">
      <div class="sw-alert-ttl">Falha de Conexão</div>
      <div class="sw-alert-msg">Não foi possível sincronizar os dados com o servidor remoto.</div>
    </div>
  </div>
  <div class="sw-alert inf">
    <i class="sw-alert-ico swi-info-circle"></i>
    <div class="sw-alert-body">
      <div class="sw-alert-ttl">Novidade</div>
      <div class="sw-alert-msg">O catálogo de micro-animações de texto já está disponível para uso.</div>
    </div>
  </div>
</div>

<div style="display:grid; gap:1.2rem; width:100%;">
  <div>
    <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.4rem; font-weight:600;">
      <span>Progresso Primário</span>
      <span style="color:var(--color-primary);">75%</span>
    </div>
    <div class="sw-prog"><div class="sw-prog-bar" style="width:75%; background:var(--color-primary);"></div></div>
  </div>
  <div>
    <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.4rem; font-weight:600;">
      <span>Progresso Sucesso</span>
      <span style="color:#22c55e;">100%</span>
    </div>
    <div class="sw-prog"><div class="sw-prog-bar" style="width:100%; background:#22c55e;"></div></div>
  </div>
  <div>
    <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.4rem; font-weight:600;">
      <span>Progresso Gradiente Especial</span>
      <span style="color:#8b5cf6;">92%</span>
    </div>
    <div class="sw-prog"><div class="sw-prog-bar" style="width:92%; background:linear-gradient(90deg, #0ea5e9, #6366f1, #8b5cf6);"></div></div>
  </div>
</div>

<div class="demo-row">
  <button sw-btn class="sw-btn-pri sw-btn-pil">Pílula Sólida</button>
  <button sw-btn class="sw-btn-out sw-btn-pil">Pílula Outline</button>
  <button sw-btn class="sw-btn-pri sw-btn-rnd" aria-label="Favorito"><i class="swi-heart"></i></button>
  <button sw-btn class="sw-btn-soft sw-btn-rnd" aria-label="Salvar"><i class="swi-bookmark"></i></button>
  <button sw-btn class="sw-btn-out sw-btn-sqr" aria-label="Editar"><i class="swi-edit"></i></button>
  <button sw-btn class="sw-btn-gls sw-btn-sqr" aria-label="Configurações"><i class="swi-cog"></i></button>
</div>

<div class="demo-row" style="flex-direction:column; align-items:flex-start; gap:1rem;">
  <div sw-btn-grp>
    <button sw-btn class="sw-btn-pri">Esquerda</button>
    <button sw-btn class="sw-btn-pri">Centro</button>
    <button sw-btn class="sw-btn-pri">Direita</button>
  </div>
  <div sw-btn-grp class="is-pil">
    <button sw-btn class="sw-btn-out">Dia</button>
    <button sw-btn class="sw-btn-out">Semana</button>
    <button sw-btn class="sw-btn-out">Mês</button>
    <button sw-btn class="sw-btn-out">Ano</button>
  </div>
  <div sw-btn-grp>
    <button sw-btn class="sw-btn-soft sw-btn-sqr" aria-label="Alinhar à esquerda"><i class="swi-align-left"></i></button>
    <button sw-btn class="sw-btn-soft sw-btn-sqr" aria-label="Centralizar"><i class="swi-align-center"></i></button>
    <button sw-btn class="sw-btn-soft sw-btn-sqr" aria-label="Alinhar à direita"><i class="swi-align-right"></i></button>
  </div>
</div>

<div class="demo-row">
  <button sw-btn class="sw-btn-pri sw-btn-ldr">Salvando alterações…</button>
  <button sw-btn class="sw-btn-sec sw-btn-ldr">Enviando…</button>
  <button sw-btn class="sw-btn-out sw-btn-ldr">Processando…</button>
</div>

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.