Button — Effecti Design System

Overview

Demonstração real e interativa de Button nas larguras desktop, tablet e mobile.

Button

Playground

Altere as propriedades e veja o componente atualizar em tempo real.

Variant

Size

State

Icon

Full Width

<Button
  variant="primary"
  size="md"
>
  Enviar proposta
</Button>

Variants

Variações disponíveis e quando usar cada uma.

Primary

Ação principal da tela. Apenas uma por contexto.

Secondary

Ação relevante, porém não principal.

Tertiary

Ações neutras em barras de ferramentas e tabelas.

Ghost

Ações de baixa ênfase dentro de cards e listas.

Destructive

Ações irreversíveis, sempre com confirmação.

States

Todos os estados exibidos simultaneamente para facilitar a comparação.

Default

Hover

Blue 600

Focus

Focus ring

Pressed

Blue 800

Selected

Disabled

Loading

Error

Sizes

Dimensões e espaçamentos por tamanho.

Tamanho	Dimensões	Token
Small	32px de altura · padding 12px · texto 13px
Medium	40px de altura · padding 16px · texto 14px
Large	48px de altura · padding 20px · texto 15px

Anatomy

Partes que compõem o componente.

1
Container
Superfície clicável com background, radius e padding.
2
Label
Texto de ação, sempre verbo no infinitivo.
3
Leading Icon
Ícone opcional de 16px à esquerda do label.
4
Trailing Icon
Ícone opcional à direita, para direção ou menu.
5
Focus Ring
Contorno de 2px visível apenas em navegação por teclado.

Usage

Critérios de escolha e boas práticas.

When to use

Para disparar uma ação imediata como salvar, enviar ou confirmar.
Quando a ação é o próximo passo esperado do fluxo.
Em formulários, modais, toolbars e cabeçalhos de página.

When not to use

Para navegar entre páginas — use Link Nav.
Para alternar estados binários — use Switch Button.
Para selecionar entre opções — use Selection Buttons.

Do

Use apenas um botão primário por contexto e mantenha labels curtos e acionáveis.

Don't

Não empilhe múltiplos botões primários nem use textos vagos como “Clique aqui”.

Accessibility

Requisitos obrigatórios para conformidade WCAG 2.1 AA.

Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
Área mínima de toque de 44x44px em dispositivos móveis.
Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.

Specifications

Valores de referência para implementação, sempre baseados em tokens.

Propriedade	Valor	Token
Height	32 / 40 / 48px
Padding	12 / 16 / 20px
Gap	8px
Border	1px (secondary/tertiary)
Border Radius	6px
Typography	14px / 500
Icon Size	16px
Background	Blue 400
Hover	Blue 600
Focus	2px Blue 400