Button

Botão que dispara uma ação. Quatro variantes e quatro tamanhos, um estado de carregamento que mantém o foco e um visual que vem inteiro do estilo ativo.

Feito com Base UIPadrão WAI-ARIA ButtonComponente clienteCódigo ↗

minimal · light · #3fa34d

variant

size

disabled

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. O estilo carregado cuida do visual.

import { Button, IconButton, ButtonGroup } from "@camaleo/react";

Anatomia

Um elemento com até três partes. Cada parte tem um data-slot que você pode usar no CSS.

spinnericonPublicar

[data-slot="button"][data-slot="spinner"] · [data-slot="icon"]rótulo (children)

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Tamanhos

sm, md e lg seguem as alturas de controle do estilo, então um formulário e seus botões sempre ficam alinhados.

Com ícone

Ícone antes do rótulo para algo novo, depois dele para direção ou download. Marque com data-slot="icon" e aria-hidden.

Só ícone

O IconButton exige aria-label. Use junto com um Tooltip para quem enxerga também ver o nome.

Ver preços

Como link

Navegação é link, não botão. render={<a href="…" />} com nativeButton={false} mantém o visual e entrega uma âncora de verdade.

Salvando, depois salvo

Clique. O loading mantém a largura e o foco enquanto a requisição roda; uma mensagem de status anuncia o resultado.

Destrutivo, com confirmação

Clique. Uma ação danger abre um AlertDialog. A escolha segura vem primeiro e recebe o foco.

Em grupo

O ButtonGroup junta ações relacionadas com role="group". Para navegar entre elas com as setas, use o Toolbar.

Aceite os termos para continuar.

Desativado, com o motivo

Nunca deixe a pessoa adivinhando. Diga o que falta e ligue com aria-describedby, ou mantenha o botão ativo e valide no envio.

Em contexto

Botão nunca aparece sozinho. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Mais escolhido

Equipe

R$ 99 por pessoa / mês

Projetos ilimitados
Estilos e tokens compartilhados
Suporte prioritário

Cartão de preçoCard · Badge · Button

Nenhum projeto ainda

Crie seu primeiro projeto ou importe um de um arquivo.

Estado vazioEmptyState · Button

Cookies

Usamos cookies para manter você conectado e, se você concordar, para medir o que ajuda.

Banner de consentimentoCard · Button

Boas práticas

FaçaUm botão sólido por área.

Ele mostra qual é a ação principal.

EviteTrês botões sólidos lado a lado.

Nada se destaca, então nada fica claro.

FaçaComece com um verbo.

Diga o que acontece: "Emitir nota", "Salvar alterações".

EviteRótulos vagos.

"OK" e "Clique aqui" não dizem nada fora de contexto, nem para um leitor de tela que lista os botões.

Props

PropriedadeTipoPadrãoDescrição

variant"danger" | "ghost" | "outline" | "solid""solid"Peso visual: solid para a ação principal, outline para as secundárias, ghost para as discretas, danger para as destrutivas.

size"icon" | "lg" | "md" | "sm""md"Altura, espaçamento e tamanho do texto, da escala de controles do estilo. icon deixa o botão quadrado.

loadingbooleanfalseMostra um spinner e desativa o botão, mantendo o foco nele.

disabledboolean—Desativa o botão e o tira da ordem de tabulação.

renderReactElement | (props, state) => ReactElement—Troca o elemento renderizado, por exemplo por um link, mantendo o comportamento.

nativeButtonbooleantrueSe o elemento final é um <button> nativo. Use false quando o render não for um botão.

focusableWhenDisabledbooleanfalseSe o botão continua focável quando desativado.

O IconButton recebe as mesmas props, sem size e com aria-label obrigatório. Os atributos nativos de botão passam direto.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio botão.

Atributos

data-slot"button"

data-variantsolid · outline · ghost · danger

data-sizesm · md · lg · icon

data-loadingpresente durante o carregamento

data-disabledpresente quando desativado

Tokens que ele lê

Cor

--cml-accent--cml-accent-fg--cml-accent-hover--cml-border--cml-danger--cml-danger-fg--cml-fg--cml-fg-secondary--cml-field-bg--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-input-addon-fg--cml-shadow-control-active--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-control-height--cml-control-height-lg--cml-control-height-sm--cml-control-padding--cml-control-padding-lg--cml-control-padding-sm--cml-field-padding--cml-gap--cml-radius-control--cml-radius-control-lg--cml-radius-control-sm

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-control--cml-font-size-control--cml-font-size-control-lg--cml-font-size-control-sm--cml-font-weight-control--cml-letter-spacing-control--cml-press-translate--cml-text-transform-control

Só deste componente

--cml-button-danger-image--cml-button-disabled-shadow--cml-button-ghost-decoration--cml-button-ghost-fg--cml-button-outline-bg--cml-button-outline-border--cml-button-outline-shadow--cml-button-solid-image--cml-disabled-opacity

/* botão principal em pílula, só nesta seção */
.checkout [data-slot="button"][data-variant="solid"] {
  --cml-radius-control: 999px;
}

Acessibilidade

EnterAtiva o botão.

SpaceAtiva o botão ao soltar.

TabLeva o foco até ele, inclusive durante o carregamento.

Relacionados

ToggleUm botão que fica pressionado.SpinnerIndicador de carregamento sozinho.DialogConfirme ou peça dados antes de agir.

Esta página foi útil? · Editar esta página no GitHub