Skip to main content
Exibe as opções de uma variação de SKU (ex.: tamanhos, cores) como botões. Opções indisponíveis recebem estilo de riscado automaticamente. Usado internamente pelo SelectSku quando variationsStyle="buttons".

​
Uso

<VariantButton
  :options="[
    { id: 1, value: 'P', available: true },
    { id: 2, value: 'M', available: true },
    { id: 3, value: 'G', available: false }
  ]"
  :value="selectedOptionId"
  :error="hasError"
  @change="selectedOptionId = $event"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
optionsArray❌[]Lista de opções da variação. Cada item deve ter id, value e available (Boolean).
valueNumber❌0ID da opção atualmente selecionada.
errorBoolean❌falseQuando true, aplica borda de erro aos botões para indicar seleção obrigatória.
disabledBoolean❌falseDesabilita todos os botões de variação.

​
Eventos

EventoPayloadDescrição
changeNumberEmitido com o id da opção selecionada ao clicar.