Componentes/Button

Button

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

Formulário / Controles

Figma: 1318:749

Preview

Default (24px)

Large (32px)

Trading

Disabled

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Primary -->
<button class="trdr-btn trdr-btn-primary">Confirmar</button>
<button class="trdr-btn trdr-btn-primary trdr-btn-lg">Confirmar (Large)</button>
<button class="trdr-btn trdr-btn-primary" disabled>Desabilitado</button>

<!-- Secondary -->
<button class="trdr-btn trdr-btn-secondary">Cancelar</button>

<!-- Ghost -->
<button class="trdr-btn trdr-btn-ghost">Ghost</button>

<!-- Destructive -->
<button class="trdr-btn trdr-btn-destructive">Excluir</button>

<!-- Inverse -->
<button class="trdr-btn trdr-btn-inverse">Inverse</button>

<!-- Link -->
<button class="trdr-btn trdr-btn-link">Ver mais</button>

<!-- Link Danger -->
<button class="trdr-btn trdr-btn-link-danger">Remover</button>

<!-- Secondary Destruct -->
<button class="trdr-btn trdr-btn-secondary-destruct">Cancelar operação</button>

<!-- Long / Short — Trading -->
<button class="trdr-btn trdr-btn-long">Long</button>
<button class="trdr-btn trdr-btn-short">Short</button>

Dimensões

Variante	Largura	Altura
Default	`—`	`24px`
Large	`—`	`32px`

Props / Variantes

Prop	Tipo	Valores
`Variant`	enum	`PrimarySecondaryGhostLinkLink DangerDestructiveInverseLongShortSecondary Destruct`
`Size`	enum	`DefaultLarge`
`State`	enum	`DefaultHoverPressedDisabled`
`Icon Left`	boolean	`truefalse`
`Icon Right`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
BG Primary	`action.brand.default`	`#00D4FF`
BG Primary Hover	`action.brand.hover`	`#00A8CC`
BG Primary Active	`action.brand.active`	`#007D99`
BG Secondary	`action.secondary.default`	`#4A4A4A`
Text sobre Primary	`content.inverse`	`#1A1A1A`
Text sobre Secondary	`content.primary`	`#FFFFFF`
Text Ghost	`content.secondary`	`#E8E8E8`
BG Destructive	`action.destructive.default`	`#EA580C`
BG Long (trading)	`context.trading.long.default`	`#4FE29014`
Text Long (trading)	`context.trading.long.text`	`#6DE7A2`
BG Short (trading)	`context.trading.short.default`	`#F1312614`
Text Short (trading)	`context.trading.short.text`	`#F56D64`
Border radius	`scale.radius.md`	`8px`
Border Ghost	`border.default`	`#4A4A4A`
Font family	`font.secondary`	`Inter`
Font size Default	`font-size-100`	`14px`
Font weight	`text.label.sm.weight`	`600 (SemiBold)`

Anatomia

[Icon Left?] [Label] [Icon Right?]
Gap: 4px | Padding: 8px H (Default) / 12px H (Large)
Height: 24px (Default) / 32px (Large) | Border-radius: 8px

Notas

Variantes "Long" e "Short" são botões para contextos de trading (compra/venda). "Secondary Destruct" é Ghost com cor destrutiva. "Inverse" é usado sobre fundos claros.