Componentes/Button

Button

Botão principal do sistema com 10 variantes visuais, 2 tamanhos e 4 estados.

Formulário / Controles
Figma: 1318:749

Dimensões

VarianteLarguraAltura
Default—24px
Large—32px

Props / Variantes

PropTipoValores
Variantenum
PrimarySecondaryGhostLinkLink DangerDestructiveInverseLongShortSecondary Destruct
Sizeenum
DefaultLarge
Stateenum
DefaultHoverPressedDisabled
Icon Leftboolean
truefalse
Icon Rightboolean
truefalse

Tokens Utilizados

PropriedadeTokenValor
BG Primaryaction.brand.default
#3D99FF
BG Secondaryaction.secondary.default
#4A4A4A
Text Primarycontent.inverse
#1A1A1A
Text Secondarycontent.primary
#FFFFFF
BG Destructiveaction.destructive.default
#F57C00

Anatomia

[Icon?] [Label] [Icon?]
Padding: 8px horizontal (Default) / 12px (Large)

Notas

Variante "Long" e "Short" são botões de largura fixa pré-definida para contextos de formulário de trading.