Alquimia Design System

Cores

Escalas do ADS. O passo é o nome do token; o hex é o valor no código.

Parâmetros

Grupo

Passo

Código

vue

<div
class="bg-[#e4f2ff] h-10 w-10 rounded-sm"
/>

Propriedades

Tokens de uso

A escala acima é a matéria-prima. Na interface, use o token semântico.

Propriedades de Tokens de uso
Token	Tipo	Valor	Uso
--ads-text-primary	cor	#061938	Texto principal.
--ads-text-secondary	cor	#505f79	Texto de apoio.
--ads-text-tertiary	cor	#a5adba	Texto desabilitado ou secundário.
--ads-text-brand	cor	#006ff7	Link e destaque da marca.
--ads-text-contrast	cor	#ffffff	Texto sobre fundo de marca.
--ads-surface-main	cor	#fafbfc	Fundo da página.
--ads-surface-card	cor	#ffffff	Fundo de cartão e campo.
--ads-surface-brand	cor	#006ff7	Fundo da marca.
--ads-border-subtle	cor	#e5e8eb	Borda de divisória e cartão.

Botão

Ação de tela. O exemplo segue os parâmetros: tipo, cor, tamanho, conteúdo e estado. Outline e unfilled não têm pressed.

Parâmetros

Tipo

Cor

Tamanho

Conteúdo

Estado

Ícone à esquerdaÍcone à direitaCarregando

Código

vue

<AdsButton
label="Button Test"
leading
trailing
/>

Propriedades

AdsButton

Ação de tela. Sem rótulo, o botão fica quadrado e mostra só o ícone.

Propriedades de AdsButton
Propriedade	Tipo	Padrão	Descrição
type	filled \| outline \| unfilled \| secondary	filled	Visual do botão. Outline e unfilled não têm pressed.
color	primary \| success \| attention \| warning \| new \| innovation \| blocked \| neutral	primary	Cor do status. Neutral é ação sem status.
size	md \| sm	md	md no desktop, sm no mobile.
label	string	""	Rótulo. Vazio deixa o botão só com ícone.
leading	boolean	false	Ícone à esquerda. No exemplo, sparkles.
trailing	boolean	false	Ícone à direita. Sem trailingIcon, usa icon.
icon	string	i-lucide-sparkles	Nome do ícone Lucide.
trailingIcon	string	""	Ícone da direita. Vazio reutiliza icon.
to	RouteLocationRaw	—	Vira link. Sem valor, continua button.
disabled	boolean	false	Bloqueia o clique.
loading	boolean	false	Troca o ícone por spinner e bloqueia outro clique.
nativeType	button \| submit \| reset	button	Atributo type do button. A prop type já é o visual.
state	active \| hover \| pressed \| disabled \| null	null	Congela um estado na documentação. Sem valor, hover e pressed vêm do ponteiro.

Slots

Slots de AdsButton
Slot	Uso
default	Substitui o label.

Campos

Formulário, número, busca, texto longo e data. O rótulo fica acima do campo.

Label

Orientação curta sobre o campo.

Parâmetros

Componente

Estado

RótuloOrientação

Código

vue

<AdsInput
v-model="text"
label="Label"
placeholder="Placeholder"
hint="Orientação curta sobre o campo."
/>

Propriedades

AdsInput

Propriedades de AdsInput
Propriedade	Tipo	Padrão	Descrição
v-model	string \| number	""	Valor do campo.
label	string	""	Rótulo acima do campo.
hint	string	""	Texto de apoio. Some quando há error.
error	string	""	Mensagem de erro. Também marca o campo como inválido.
info	string	""	Tooltip do ícone de informação ao lado do rótulo.
placeholder	string	""	Texto enquanto o campo está vazio.
disabled	boolean	false	Impede a edição.
icon	string	""	Ícone à direita. Vazio esconde o ícone.
type	text \| number	text	Tipo nativo do input.
suffix	string	""	Texto fixo à direita, como uma unidade.
min	string \| number	—	Mínimo, quando type é number.
step	string \| number	—	Passo, quando type é number.
state	default \| active \| focus \| error \| disabled \| ai \| null	null	Congela o estado na documentação.

Eventos

Eventos de AdsInput
Evento	Payload	Quando
focus	FocusEvent	O campo recebe o foco.
blur	FocusEvent	O campo perde o foco.

AdsNumberInput

Campo numérico com setas de passo e sufixo.

Propriedades de AdsNumberInput
Propriedade	Tipo	Padrão	Descrição
v-model	string \| number	""	Valor do campo.
label	string	""	Rótulo acima do campo.
hint	string	""	Texto de apoio. Some quando há error.
info	string	""	Tooltip do ícone de informação ao lado do rótulo.
error	string	""	Mensagem de erro.
placeholder	string	""	Texto enquanto o campo está vazio.
suffix	string	""	Unidade à direita, como %.
disabled	boolean	false	Impede a edição e as setas.
min	string \| number	—	Valor mínimo do passo.
step	string \| number	—	Incremento das setas.
state	default \| active \| focus \| error \| disabled \| null	null	Congela o estado na documentação.

Eventos

Eventos de AdsNumberInput
Evento	Payload	Quando
focus	FocusEvent	O campo recebe o foco.
blur	FocusEvent	O campo perde o foco.

AdsSearchInput

Propriedades de AdsSearchInput
Propriedade	Tipo	Padrão	Descrição
v-model	string	""	Texto da busca. Com valor, aparece o botão de limpar.
placeholder	string	Pesquisar	Texto enquanto a busca está vazia.
ariaLabel	string	""	Nome acessível. Sem valor, usa o placeholder.
hint	string	""	Texto de apoio abaixo do campo.
disabled	boolean	false	Impede a busca.
icon	string	i-lucide-search	Ícone à esquerda.
size	md \| sm	md	md tem 45px; sm tem 40px.
state	default \| active \| focus \| disabled \| null	null	Congela o estado na documentação.

AdsTextarea

Propriedades de AdsTextarea
Propriedade	Tipo	Padrão	Descrição
v-model	string	""	Texto longo.
label	string	""	Rótulo acima do campo.
hint	string	""	Texto de apoio. Some quando há error.
error	string	""	Mensagem de erro.
placeholder	string	""	Texto enquanto o campo está vazio.
disabled	boolean	false	Impede a edição.
state	default \| active \| focus \| error \| disabled \| null	null	Congela o estado na documentação.

AdsDatePicker

Data única no v-model. Com range, o período vai em start e end.

Propriedades de AdsDatePicker
Propriedade	Tipo	Padrão	Descrição
v-model	string	""	Data no formato AAAA-MM-DD. Ignorado quando range está ativo.
v-model:start	string	""	Início do período.
v-model:end	string	""	Fim do período.
range	boolean	false	Abre o calendário de período.
min	string	—	Data mínima, AAAA-MM-DD.
max	string	—	Data máxima, AAAA-MM-DD.
disabled	boolean	—	Impede a escolha.
readonly	boolean	—	Mostra a data sem abrir o calendário.
size	sm \| md \| lg	md	Altura do campo.
maximumDays	number	—	Limite de dias do período, contando o início.
class	string	—	Classe no gatilho.

Filtro

Select com lista, busca ou calendário de mês. Rótulo longo ganha reticências e tooltip.

Label

Orientação curta sobre o campo.

Parâmetros

Tipo

Estado

Orientação

Código

vue

<AdsFilterSelect
v-model="selection"
type="checkbox"
label="Label"
:options="options"
hint="Orientação curta sobre o campo."
/>

Propriedades

AdsFilterSelect

Select com lista, busca ou calendário de mês. Rótulo longo ganha reticências e tooltip.

Propriedades de AdsFilterSelect
Propriedade	Tipo	Padrão	Descrição
v-model	string \| string[]	obrigatório	checkbox usa string[]. radio e month usam string.
type	checkbox \| radio \| month	obrigatória	Lista múltipla, escolha única ou mês.
label	string	—	Rótulo acima do campo.
hint	string	—	Texto de apoio. Some quando há error.
error	string	—	Mensagem de erro.
placeholder	string	Selecione	Texto sem valor.
disabled	boolean	false	Impede a abertura.
options	{ value: string; label: string }[]	[]	Itens da lista. month não usa options.
searchable	boolean \| null	null	null busca só no checkbox.
selectAll	boolean \| null	null	null mostra “selecionar todos” só no checkbox.
selectAllLabel	string	Selecionar todos	Rótulo da ação de marcar todos.
allSelectedLabel	string	Todos selecionados	Texto do gatilho quando tudo está marcado.
emptyLabel	string	Nenhum resultado	Lista vazia depois da busca.
searchPlaceholder	string	Pesquisar	Placeholder da busca interna.
block	boolean	false	O gatilho ocupa a largura do campo.

Abas

Troca de visão na mesma tela: link para seções, segmented para um filtro curto.

Parâmetros

Variante

Quantidade

Código

vue

<AdsTabs
v-model="tab"
:items="items"
:content="false"
/>

Propriedades

AdsTabs

Faixa de links para trocar a visão da mesma tela.

Propriedades de AdsTabs
Propriedade	Tipo	Padrão	Descrição
v-model	string \| number	—	Valor da aba ativa.
items	TabsItem[]	obrigatória	Rótulo e valor de cada aba.
content	boolean	true	false deixa só a faixa, sem painel.
defaultItem	TabsItem	—	Aba inicial quando não há v-model.
listClass	string	""	Classes extras na lista, como um recuo lateral.

Slots

Slots de AdsTabs
Slot	Uso
trailing	Conteúdo depois do rótulo da aba.
content	Painel da aba ativa.

AdsSegmentedTabs

Filtro curto em pílula. Não renderiza painel.

Propriedades de AdsSegmentedTabs
Propriedade	Tipo	Padrão	Descrição
v-model	string \| number	obrigatório	Valor do segmento ativo.
items	TabsItem[]	obrigatória	Rótulo e valor de cada segmento.
ariaLabel	string	—	Nome do grupo, lido pelo leitor de tela.

Feedback

Aviso, toast flutuante, arquivo escolhido e tooltip. O arquivo usa success e warning do ADS.

Mensagem de erro

Parâmetros

Componente

Status

Variação AppFecharAção

Código

vue

<AdsToast
status="error"
/>

Propriedades

AdsToast

Faixa de aviso na página. O toast flutuante usa useToast do Nuxt UI.

Propriedades de AdsToast
Propriedade	Tipo	Padrão	Descrição
status	primary \| success \| error \| warning \| neutral	error	Cor e ícone da faixa.
app	boolean	false	Faixa estreita de 331px, a variação App.
message	string	—	Texto. O slot padrão substitui.
icon	string	—	Ícone Lucide. Sem valor, segue o status.
closable	boolean	true	Mostra o botão de fechar.
actionLabel	string	—	Rótulo da ação, como tentar de novo.
actionIcon	string	i-lucide-refresh-cw	Ícone da ação. Vazio esconde o ícone.

Eventos

Eventos de AdsToast
Evento	Payload	Quando
close	—	O botão de fechar foi acionado.
action	—	A ação da faixa foi acionada.

Slots

Slots de AdsToast
Slot	Uso
default	Substitui a mensagem.

AdsFileCard

Propriedades de AdsFileCard
Propriedade	Tipo	Padrão	Descrição
name	string	obrigatória	Nome do arquivo.
detail	string	—	Linha de apoio, como o tamanho.
status	success \| error	success	success confirma; error mostra o problema.
message	string	—	Texto do problema, acima do arquivo.
icon	string	—	Ícone. Sem valor, segue o status.
removable	boolean	false	Mostra a ação de remover.
removeLabel	string	Remover arquivo	Nome acessível da ação de remover.

Eventos

Eventos de AdsFileCard
Evento	Payload	Quando
remove	—	A ação de remover foi acionada.

InvertedTooltip

Tooltip escuro para texto que não cabe na linha. O tooltip claro do exemplo é o UTooltip.

Propriedades de InvertedTooltip
Propriedade	Tipo	Padrão	Descrição
text	string	obrigatória	Texto do tooltip. Vazio desliga o tooltip.
delayDuration	number	150	Espera antes de abrir, em milissegundos.
disabled	boolean	false	Não abre.
content.side	top \| right \| bottom \| left	top	Lado em relação ao gatilho.
content.align	start \| center \| end	start	Alinhamento no lado escolhido.
content.sideOffset	number	8	Distância do gatilho, em pixels.

Slots

Slots de InvertedTooltip
Slot	Uso
default	Gatilho. No texto truncado, o elemento precisa truncar.

Carregando

Espera na tela. Spinner na área vazia, skeleton quando o formato já é conhecido, shimmer quando o conteúdo continua visível. Ação no botão, processo de tela, percentual e o esqueleto de tabela usam a peça de cada caso.

Parâmetros

Tamanho

Tom

Seção vazia

Código

vue

<AdsLoading />

Propriedades

AdsLoading

Propriedades de AdsLoading
Propriedade	Tipo	Padrão	Descrição
variant	spinner \| skeleton \| shimmer	spinner	spinner na área vazia, skeleton quando o formato já é conhecido, shimmer sobre o conteúdo.
size	sm \| md \| lg	md	sm na tabela, md na seção, lg no modal.
tone	primary \| muted	primary	primary no dado da tela, muted numa tabela secundária.
region	boolean	false	Centraliza o spinner numa seção vazia.
label	string	""	Texto ao lado do spinner.
lines	number	0	Linhas do skeleton. Zero desenha um bloco; a class define altura e largura.

useOverlayLoading

Cobre a página quando o processo não tem uma área própria. As opções abaixo são passadas para show() e update().

Propriedades de useOverlayLoading
Propriedade	Tipo	Padrão	Descrição
title	string	—	Título do overlay.
description	string	—	Texto de apoio.
hint	string	—	Linha auxiliar.
showProgress	boolean	—	Mostra a barra de progresso.
progress	number	—	Percentual, de 0 a 100.
variant	loading \| success \| error \| search \| info	—	Estado do processo.
iconSrc	string	—	Ícone próprio.
actionLabel	string	—	Rótulo da ação, como fechar no sucesso.
onAction	() => void	—	Callback da ação.
onUserClose	() => void	—	Callback quando a pessoa fecha.
closableVariants	('success' \| 'error')[]	—	Variantes em que a pessoa pode fechar o overlay.

Métodos

Métodos de useOverlayLoading
Método	Assinatura	Uso
show	(options) => symbol \| null	Abre o overlay. Se já houver um aberto, ele fecha antes.
update	(options: Partial) => void	Mescla as opções no overlay aberto. As props precisam ser planas.
close	() => void	Fecha o overlay aberto.
isOpen	() => boolean	Diz se há um overlay aberto.
getCurrentId	() => symbol \| null	Id do overlay aberto.

ProgressBarLoading

Propriedades de ProgressBarLoading
Propriedade	Tipo	Padrão	Descrição
title	string	""	Título do trabalho.
description	string	""	Texto de apoio.
icon	string	i-lucide-loader-circle	Ícone ao lado do título.
showIcon	boolean	true	Mostra o ícone.
spinIcon	boolean	true	Gira o ícone.
indeterminate	boolean	false	Barra sem percentual conhecido.
percent	number	0	Andamento, de 0 a 100.
showPercent	boolean	true	Mostra o número do percentual.
showElapsedTime	boolean	true	Mostra o tempo decorrido.
ariaLabel	string	""	Nome acessível da barra.
variant	primary \| success \| error	primary	Cor da barra. Não altera o comportamento.
rootClass	string	flex flex-col gap-3	Classe do contêiner.

ProductTableSkeleton

Mock local do playground. O bloco genérico continua AdsLoading.

Propriedades de ProductTableSkeleton
Propriedade	Tipo	Padrão	Descrição
rows	number	4	Quantidade de linhas do esqueleto.

Pills

Estado e contagem em uma peça compacta.

2

Parâmetros

Componente

Cor

Mini (ponto)

Código

vue

<AdsBadge />

Propriedades

AdsBadge

Propriedades de AdsBadge
Propriedade	Tipo	Padrão	Descrição
color	primary \| success \| attention \| warning \| new \| innovation \| blocked	primary	Cor do contador.
mini	boolean	false	Ponto de 8px, sem número.
value	string \| number	2	Número ou texto do contador. Ignorado no mini.

AdsBroadcast

Propriedades de AdsBroadcast
Propriedade	Tipo	Padrão	Descrição
label	string	LIVE	Texto da pílula.
status	warning \| success	warning	Cor do ponto e do texto.

AdsPill

Propriedades de AdsPill
Propriedade	Tipo	Padrão	Descrição
status	default \| success \| attention \| warning \| new \| blocked \| innovation \| neutral	default	Cor do estado.
tone	primary \| secondary	primary	primary é sólido; secondary é a variação clara.
label	string	—	Texto. Sem valor, usa o nome do status.
icon	string	—	Ícone Lucide à esquerda.
iconClass	string	—	Classes do ícone, como o giro do carregamento.

AdsNotabilityPill

Propriedades de AdsNotabilityPill
Propriedade	Tipo	Padrão	Descrição
notability	string	obrigatória	image, traffic ou profit. Outro valor cai em image.
label	string	—	Texto. Sem valor, formata o nome da notabilidade.

AdsMiniPill

Propriedades de AdsMiniPill
Propriedade	Tipo	Padrão	Descrição
type	nao-iniciado \| pausado \| novo	nao-iniciado	Estado compacto.
label	string	—	Texto. Sem valor, usa o rótulo do type.

Controles

Switch, checkbox e radio. Texto de 14, regular, na cor secondary.

Somente ativas

Parâmetros

Componente

RótuloDesabilitado

Código

vue

<AdsSwitch
v-model="switchOn"
label="Somente ativas"
/>

Propriedades

AdsSwitch

Propriedades de AdsSwitch
Propriedade	Tipo	Padrão	Descrição
v-model	boolean	false	Ligado ou desligado.
label	string	""	Texto ao lado. O slot padrão substitui.
disabled	boolean	false	Impede a troca. O visual muda para o estado desabilitado.

Slots

Slots de AdsSwitch
Slot	Uso
default	Substitui o label.

AdsCheckbox

Propriedades de AdsCheckbox
Propriedade	Tipo	Padrão	Descrição
v-model	boolean	false	Marcado ou não.
v-model:indeterminate	boolean	false	Estado misto. O clique desmarca o misto e grava o valor.
label	string	""	Texto ao lado. O slot padrão substitui.
disabled	boolean	false	Impede a troca.

Slots

Slots de AdsCheckbox
Slot	Uso
default	Substitui o label.

AdsRadio

Radios do mesmo grupo compartilham v-model e name.

Propriedades de AdsRadio
Propriedade	Tipo	Padrão	Descrição
v-model	string \| number \| boolean	""	Valor escolhido no grupo.
value	string \| number \| boolean	on	Valor deste item.
name	string	""	Agrupa os radios no formulário. Vazio gera um nome.
label	string	""	Texto ao lado. O slot padrão substitui.
disabled	boolean	false	Impede a escolha deste item.

Slots

Slots de AdsRadio
Slot	Uso
default	Substitui o label.

Modal

Confirmação que interrompe: título, texto de apoio e duas ações.

Parâmetros

Variante

Tamanho

ÍconeTexto de apoioFechar (X)

Código

vue

<AdsModal
v-model:open="open"
icon="i-lucide-align-center"
title="Confirmar alteração"
description="O texto de apoio explica a consequência. Cancelar fecha. Continuar segue a ação."
/>

Propriedades

AdsModal

Confirmação que interrompe. dialog no centro; sheet preso à base, no app.

Propriedades de AdsModal
Propriedade	Tipo	Padrão	Descrição
v-model:open	boolean	false	Controla a abertura.
title	string	obrigatória	Título. O slot title substitui.
description	string	—	Texto de apoio.
icon	string	—	Ícone Lucide ao lado do título. Sem valor, o título fica só com o texto.
cancelLabel	string	Cancelar	Rótulo da ação secundária.
confirmLabel	string	Continuar	Rótulo da ação principal.
variant	dialog \| sheet	dialog	dialog centraliza. sheet cola na base e arredonda só o topo.
size	md \| lg \| xl \| 2xl \| 3xl	md	Largura do cartão. md é o diálogo de confirmação, 532px.
scrollable	boolean	false	Permite rolagem quando o conteúdo passa da tela.
dismissible	boolean	true	Overlay e Esc fecham.
closable	boolean	true	Mostra o X. Overlay e Esc continuam no dismissible.

Eventos

Eventos de AdsModal
Evento	Payload	Quando
confirm	—	A ação principal foi acionada.
cancel	—	Ação Cancelar ou o X.
dismiss	"esc" \| "outside"	Fechou sem a ação principal.

Slots

Slots de AdsModal
Slot	Uso
title	Substitui o título.
default	Corpo. Quando existe, esconde as ações padrão.
footer	Ações. Quando existe, esconde as ações padrão.

Card

AdsFeatureCard é a entrada de um fluxo: ícone, título, descrição e seta, com 396px. AdsCard é o cartão de conteúdo e substitui UCard. AdsMetricCard é o número em destaque.

Parâmetros

Componente

Cor do ícone

Em breveRodapé

Código

vue

<AdsFeatureCard
title="Simulação"
description="Simulações de preços e cenários."
icon="i-lucide-calculator"
color="success"
footer-text="Atualizada hoje"
/>

Propriedades

AdsFeatureCard

Entrada de um fluxo, com 396px: ícone, título, descrição e seta.

Propriedades de AdsFeatureCard
Propriedade	Tipo	Padrão	Descrição
title	string	obrigatória	Título do fluxo.
description	string	obrigatória	Texto de apoio. Se cortar, ganha tooltip.
icon	string	obrigatória	Ícone Lucide.
color	primary \| success \| attention \| warning \| new \| blocked \| innovation	primary	Cor do ícone, a mesma do pill secondary.
to	RouteLocationRaw	—	Vira link. Sem valor, continua botão.
disabled	boolean	false	Fluxo ainda indisponível.
badges	{ label: string; tone?: AdsPillTone; status?: AdsPillStatus }[]	—	Pílulas do rodapé.
footerIcon	string	—	Ícone do rodapé.
footerText	string	—	Texto do rodapé.

Eventos

Eventos de AdsFeatureCard
Evento	Payload	Quando
click	MouseEvent	O cartão foi acionado enquanto não está desabilitado.

AdsCard

Cartão de conteúdo. Substitui UCard.

Propriedades de AdsCard
Propriedade	Tipo	Padrão	Descrição
title	string	—	Título em negrito. O slot header substitui.
description	string	—	Texto de apoio. O slot padrão substitui.
footerText	string	—	Linha curta no rodapé. O slot footer substitui.
as	div \| button	div	button quando o cartão é a própria ação.
disabled	boolean	false	Só vale quando as é button.
selected	boolean	false	Realce de item escolhido.
radius	sm \| md	md	sm tem 8px; md tem 12px.

Slots

Slots de AdsCard
Slot	Uso
header	Substitui o título.
hint	Conteúdo à direita do título.
actions	Ações no cabeçalho.
default	Corpo. Substitui description.
footer	Rodapé. Substitui footerText.

AdsMetricCard

Número em destaque. Rótulo 14 medium, valor 20 bold, variação 14 bold, legenda 12 regular.

Propriedades de AdsMetricCard
Propriedade	Tipo	Padrão	Descrição
title	string	obrigatória	Rótulo acima do número.
value	string	obrigatória	Número ou frase principal.
hint	string	—	Texto do ícone de ajuda ao lado do rótulo.
caption	string	—	Linha curta abaixo do número, como o valor atual.
empty	boolean	false	Valor ausente: 16px medium, cor tertiary.
as	div \| button	div	button quando o cartão é a própria ação.
disabled	boolean	false	Só vale quando as é button.
selected	boolean	false	Realce de item escolhido.

Slots

Slots de AdsMetricCard
Slot	Uso
status	Linha abaixo do rótulo.
delta	Variação ao lado do valor. Some quando empty.
footer	Conteúdo à direita da legenda.
default	Corpo extra abaixo da legenda.