SButtonGroup <s-button-group>

Agrupa um conjunto de botões relacionados, como uma ação principal e suas ações secundárias. SButtonGroup é o wrapper de Vue 3 tipado do web component <s-button-group> do Shopify Polaris.

import { SButtonGroup } from 'polaris-vue-elements'

Boas práticas

• Mantenha ações relacionadas juntas. Agrupe as chamadas para ação que pertencem à mesma tarefa para que os lojistas vejam suas opções e como elas se relacionam.
• Mantenha uma hierarquia visual. Use variant="primary" no botão da ação principal e variant="secondary" ou variant="tertiary" nos de apoio para direcionar a atenção.
• Não adicione botões demais. Uma fileira longa de opções sobrecarrega os lojistas e dificulta a decisão.
• Use um grupo segmentado para alternâncias. Para opções muito relacionadas, como alternar visualizações ou filtros, defina gap="none" para unir os botões em um único controle segmentado.
• Separe as ações destrutivas. Posicione-as de forma deliberada e dê a elas tone="critical" para que seja mais difícil acioná-las por acidente.

<SButtonGroup gap="none">
  <SButton>List</SButton>
  <SButton>Grid</SButton>
</SButtonGroup>

Veja as boas práticas da Shopify para <s-button-group> (em inglês) para todas as recomendações.

Exemplo

SaveCancelDiscard

ListGrid

<script setup>
import { SButton, SButtonGroup, SPressButton } from 'polaris-vue-elements'
</script>

<template>
  <!-- primary-action accepts a single variant="primary" button; secondary-actions
       accepts Button (variant "secondary" or "auto") and PressButton (variant
       "secondary", its default) elements. The default slot is NOT rendered by the
       underlying <s-button-group> — content without one of these slots silently
       disappears. -->
  <SButtonGroup>
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
      <SButton variant="secondary">Discard</SButton>
    </template>
  </SButtonGroup>

  <!-- Segmented toggle: gap="none" joins the buttons. primary-action is not
       supported with gap="none", so every button goes in secondary-actions. -->
  <SButtonGroup gap="none" accessibilityLabel="View style">
    <template #secondary-actions>
      <SPressButton>List</SPressButton>
      <SPressButton pressed>Grid</SPressButton>
    </template>
  </SButtonGroup>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
gap	"base" | "none"	O espaçamento entre os botões do grupo. - base: espaçamento padrão que proporciona uma separação visual clara entre os botões. - none: sem espaçamento, criando um grupo de botões conectados.

Slots

Slot	Descrição
default	Os botões exibidos dentro do componente de grupo de botões, organizados juntos como um conjunto coeso de ações relacionadas.
primary-action	A ação principal deste grupo, exibida com alto destaque visual. Aceita um único botão com variant="primary". Use isto para a ação principal que você quer que os usuários realizem. Não pode ser usado quando gap="none".
secondary-actions	Ações de apoio exibidas com menos ênfase do que a ação principal. Aceita um ou mais componentes de botão com variant="secondary" ou variant="auto". Use-as para ações alternativas ou menos importantes.