Design System — Ada

Referência visual de todos os componentes simples disponíveis.

h1

Cabeçalho principal da página.

tag: h1variant: muted, gradient
@h1
  Título principal
@h1 variant=muted
  Título muted
@h1 variant=gradient
  Título gradient

Título principal

Título muted

Título gradient

h2

Cabeçalho de seção.

tag: h2variant: muted
@h2
  Seção principal
@h2 variant=muted
  Seção muted

Seção principal

Seção muted

h3

Cabeçalho de subseção.

tag: h3variant: muted
@h3
  Subseção
@h3 variant=muted
  Subseção muted

Subseção

Subseção muted

h4

Cabeçalho de nível 4.

tag: h4variant: muted
@h4
  Título h4
@h4 variant=muted
  Título h4 muted

Título h4

Título h4 muted

h5

Cabeçalho de nível 5.

tag: h5variant: muted
@h5
  Título h5
@h5 variant=muted
  Título h5 muted
Título h5
Título h5 muted

h6

Cabeçalho de nível 6.

tag: h6variant: muted
@h6
  Título h6
@h6 variant=muted
  Título h6 muted
Título h6
Título h6 muted

p

Parágrafo de texto padrão.

tag: pvariant: muted
@p
  Este é um parágrafo de texto padrão com conteúdo informativo.
@p variant=muted
  Este é um parágrafo com variante muted.

Este é um parágrafo de texto padrão com conteúdo informativo.

Este é um parágrafo com variante muted.

lead

Texto de destaque, maior que o parágrafo padrão.

tag: pvariant: muted
@lead
  Texto lead de destaque para introduções.
@lead variant=muted
  Texto lead muted.

Texto lead de destaque para introduções.

Texto lead muted.

small

Texto pequeno para notas e detalhes secundários.

tag: smallvariant: muted
@small
  Nota de rodapé ou texto secundário.
@small variant=muted
  Nota ainda mais discreta.
Nota de rodapé ou texto secundário.Nota ainda mais discreta.

caption

Legenda ou rótulo muito pequeno.

tag: spanvariant: uppercase
@caption
  Legenda da imagem
@caption variant=uppercase
  Categoria
Legenda da imagemCategoria

blockquote

Citação em destaque com borda lateral.

tag: blockquotevariant: accent, muted
@blockquote
  A simplicidade é a sofisticação máxima.
@blockquote variant=accent
  Design com propósito.
@blockquote variant=muted
  Texto discreto em citação.
A simplicidade é a sofisticação máxima.
Design com propósito.
Texto discreto em citação.

code

Trecho de código inline.

tag: code
Use @code para destacar variáveis ou comandos inline.

Use @code para destacar variáveis ou comandos inline, como @code npm install ou @code const x = 1.

pre

Bloco de código com formatação preservada.

tag: prevariant: numbered
@pre
  function hello() {
    console.log("Olá mundo")
  }
function hello() {
  console.log("Olá mundo")
}

kbd

Tecla de teclado estilizada.

tag: kbdsize: sm, md
@kbd size=sm
  Ctrl
@kbd
  Shift
@kbd size=md
  Enter
Ctrl+Shift+Enter

button

Botão de ação com diversas variantes e tamanhos.

tag: buttonvariant: primary, secondary, accent, ghost, outline, danger, darksize: sm, md, lg
@button
  Primary
@button variant=secondary
  Secondary
@button variant=accent
  Accent
@button variant=ghost
  Ghost
@button variant=outline
  Outline
@button variant=danger
  Danger
@button variant=dark
  Dark
@button size=sm
  Small
@button size=lg
  Large

input

Campo de entrada de texto.

tag: inputvariant: default, error, successsize: sm, md, lgprop: placeholder, type, name
@input placeholder=Nome completo
@input variant=error, placeholder=Campo inválido
@input variant=success, placeholder=Campo válido
@input size=sm, placeholder=Pequeno
@input size=lg, placeholder=Grande

textarea

Campo de texto multilinha.

tag: textareavariant: default, errorsize: sm, md, lgprop: placeholder, rows
@textarea placeholder=Escreva sua mensagem...
@textarea variant=error, placeholder=Campo com erro

select

Campo de seleção de opções.

tag: selectvariant: default, errorsize: sm, md, lg
@select
  @option
    Selecione uma opção
  @option value=1
    Opção 1
  @option value=2
    Opção 2

label

Rótulo para campos de formulário.

tag: labelvariant: default, requiredprop: for
@label
  Nome
@label variant=required
  E-mail

checkbox

Caixa de seleção.

tag: input type=checkboxvariant: default, errorsize: sm, md, lg
@checkbox
@checkbox variant=error
@checkbox size=sm
@checkbox size=lg
⚠️ slot não preenchido: label

componente: checkbox
⚠️ slot não preenchido: label

componente: checkbox
⚠️ slot não preenchido: label

componente: checkbox
⚠️ slot não preenchido: label

componente: checkbox

radio

Botão de seleção única.

tag: input type=radiovariant: default, errorsize: sm, md, lg
@radio name=grupo
@radio name=grupo
@radio name=grupo2, variant=error

switch

Interruptor de alternância.

tag: buttonvariant: default, active, successsize: sm, md, lg
@switch
@switch variant=active
@switch variant=success
@switch size=sm
@switch size=lg

container

Wrapper centralizado com largura máxima.

tag: divsize: narrow, default, wide, full
@container
  Conteúdo centralizado (max-w-6xl)
@container size=narrow
  Conteúdo estreito (max-w-3xl)
container padrão — max-w-6xl
container narrow — max-w-3xl

row

Layout horizontal com flex row.

tag: divgap: sm, md, lgalign: start, center, end, between, around
@row gap=md, align=between
  @div
    Item A
  @div
    Item B
  @div
    Item C
Item AItem BItem C

column

Layout vertical com flex column.

tag: divgap: sm, md, lgalign: start, center, end
@column gap=sm, align=start
  @div
    Item 1
  @div
    Item 2
  @div
    Item 3
Item 1Item 2Item 3

grid

Layout em grade responsivo.

tag: divcols: 1, 2, 3, 4, autogap: sm, md, lg
@grid cols=3, gap=md
  @card
    Card 1
  @card
    Card 2
  @card
    Card 3

Card 1

Conteúdo do card.

Card 2

Conteúdo do card.

Card 3

Conteúdo do card.

divider

Linha separadora horizontal.

tag: hrvariant: default, accent, light, darkspacing: sm, md, lg
@divider
@divider variant=accent
@divider variant=dark, spacing=sm

Conteúdo acima

Divisor padrão

Divisor accent

Divisor dark, espaçamento pequeno

card

Contêiner de conteúdo com sombra e bordas arredondadas.

tag: divvariant: default, elevated, flat, outlined, primary, accent, darkpadding: none, sm, md, lg
@card
  Conteúdo padrão
@card variant=elevated
  Elevado
@card variant=primary
  Borda primary
@card variant=dark
  Dark

Padrão

Variante default com sombra suave.

Elevated

Sombra mais pronunciada.

Primary

Borda lateral teal.

Accent

Borda lateral laranja.

Outlined

Borda dupla, sem sombra.

Dark

Fundo escuro.

image

Imagem responsiva com variantes de estilo.

tag: imgvariant: default, rounded, circle, shadowaspect: square, video, portraitprop: src, alt
@image src=static/img/ada_logo.svg, alt=Logo Ada, variant=rounded
@image src=static/img/ada_logo.svg, alt=Logo, variant=circle
Logo AdaLogoLogo

pill

Etiqueta arredondada de destaque, maior que o badge.

tag: spanvariant: default, accent, dark, gradient, glass, success, newsize: sm, md, lg
@pill
  Padrão
@pill variant=accent
  Novidade
@pill variant=gradient
  Destaque
@pill variant=success
  Ativo
@pill variant=new
  New
@pill size=sm
  Pequeno
@pill size=lg
  Grande
PadrãoNovidadeDestaqueAtivoNewGlassDarkPequenoGrande

badge

Etiqueta compacta para status e categorias.

tag: spanvariant: primary, secondary, accent, success, warning, danger, darksize: sm, md, lg
@badge
  Primary
@badge variant=secondary
  Secondary
@badge variant=accent
  Accent
@badge variant=success
  Success
@badge variant=warning
  Warning
@badge variant=danger
  Danger
@badge variant=dark
  Dark
PrimarySecondaryAccentSuccessWarningDangerDarkSmallLarge

avatar

Foto de perfil circular ou arredondada.

tag: imgvariant: circle, rounded, squaresize: sm, md, lg, xlborder: none, white, primaryprop: src, alt
@avatar src=static/img/ada_face.svg, alt=Ada
@avatar src=static/img/ada_face.svg, alt=Ada, variant=rounded, size=lg
@avatar src=static/img/ada_face.svg, alt=Ada, border=primary
AdaAdaAdaAdaAdaAda

icon

Contêiner para ícone com fundo colorido.

tag: spanvariant: primary, secondary, accent, success, warning, dangersize: sm, md, lg, xl
@icon
  ★
@icon variant=accent, size=lg
  ♥
@icon variant=success
  ✓
★◆♥✓⚡✕★

table / thead / tbody / tr / th / td

Tabela de dados com cabeçalho, corpo e células.

table variant: default, striped, borderedtr variant: default, striped, selectedth/td align: left, center, right
@table
  @thead
    @tr
      @th
        Nome
      @th
        Status
      @th align=right
        Valor
  @tbody
    @tr
      @td
        Ada
      @td
        @badge variant=success
          Ativo
      @td align=right
        R$ 120,00
NomeStatusValor
Ada SilvaAtivoR$ 120,00
Carlos LimaPendenteR$ 80,00
Marina CostaInativoR$ 200,00

ul / ol / li

Listas ordenadas e não ordenadas.

ul variant: default, disc, check, noneli variant: default, check
@ul variant=disc
  @li
    Primeiro item
  @li
    Segundo item
@ol
  @li
    Item ordenado 1
  @li
    Item ordenado 2
ul variant=disc
  • Primeiro item
  • Segundo item
  • Terceiro item
ol
  1. Item ordenado 1
  2. Item ordenado 2
  3. Item ordenado 3

alert

Mensagem de feedback contextual.

tag: divvariant: info, success, warning, danger, neutral
@alert
  Mensagem informativa padrão.
@alert variant=success
  Operação realizada com sucesso!
@alert variant=warning
  Atenção: verifique os dados.
@alert variant=danger
  Erro ao processar a solicitação.
Mensagem informativa padrão.
Operação realizada com sucesso!
Atenção: verifique os dados.
Erro ao processar a solicitação.
Mensagem neutra.

progress

Barra de progresso.

tag: divvariant: default, success, warning, dangersize: sm, md, lg
@progress
  @div class=h-full w-3/4 bg-teal-500 rounded-full
@progress variant=success
  @div class=h-full w-1/2 bg-green-500 rounded-full
@progress variant=danger, size=lg
  @div class=h-full w-1/4 bg-red-500 rounded-full

spinner

Indicador de carregamento animado.

tag: divvariant: default, primary, whitesize: sm, md, lg
@spinner
@spinner variant=primary, size=lg
@spinner size=sm

skeleton

Placeholder animado para conteúdo carregando.

tag: divvariant: text, circle, rectsize: sm, md, lg
@skeleton variant=text, class=w-48
@skeleton variant=circle, class=w-12 h-12
@skeleton variant=rect, class=w-full h-32