VariantButton - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`options`	`Array`	❌	`[]`	Lista de opções da variação. Cada item deve ter `id`, `value` e `available` (Boolean).
`value`	`Number`	❌	`0`	ID da opção atualmente selecionada.
`error`	`Boolean`	❌	`false`	Quando `true`, aplica borda de erro aos botões para indicar seleção obrigatória.
`disabled`	`Boolean`	❌	`false`	Desabilita todos os botões de variação.

Eventos

Evento	Payload	Descrição
`change`	`Number`	Emitido com o `id` da opção selecionada ao clicar.

⌘I