Componentes/Dropdown

Dropdown

Seletor com chevron, 2 tamanhos (Default 24px / Large 32px) e 3 estados. Suporta stroke, sem stroke e icon lead. Abre um floating menu com opções.

Formulário / Controles

Figma: 1462:16743

Preview

Default (24px)

Large (32px)

Sem stroke

Código

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

<!-- Default -->
<button class="trdr-dropdown">
  <span class="trdr-dropdown-label">Mercado</span>
  <span class="trdr-dropdown-chevron">
    <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
      <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
</button>

<!-- Large -->
<button class="trdr-dropdown trdr-dropdown-lg">
  <span class="trdr-dropdown-label">Instrumento</span>
  <span class="trdr-dropdown-chevron">...</span>
</button>

<!-- Disabled -->
<button class="trdr-dropdown" disabled>
  <span class="trdr-dropdown-label">Indisponível</span>
  <span class="trdr-dropdown-chevron">...</span>
</button>

Dimensões

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

Props / Variantes

Prop	Tipo	Valores
`Size`	enum	`DefaultLarge`
`State`	enum	`DefaultFocusedActiveDisabled`
`Stroke`	boolean	`truefalse`
`Icon Lead`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
Background	`surface-primary`	`#4A4A4A`
Border padrão	`border-strong`	`#A4A4A4`
Border focused/active	`border-focus`	`#00D4FF`
Texto	`content-primary`	`#FFFFFF`
Texto disabled	`content-tertiary`	`#A4A4A4`
Chevron	`content-tertiary`	`#A4A4A4`

Anatomia

[button display=inline-flex border-radius=5px]
  └── [Icon Lead 24×24px opcional]
  └── [Label flex=1 overflow=ellipsis]
  └── [Chevron Down 24×24px]