SButtonGroup <s-button-group>

Agrupa un conjunto de botones relacionados, como una acción principal y sus acciones secundarias. SButtonGroup es el wrapper de Vue 3 tipado del web component <s-button-group> de Shopify Polaris.

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

Buenas prácticas

• Mantén juntas las acciones relacionadas. Agrupa las llamadas a la acción que pertenecen a la misma tarea para que los comerciantes vean sus opciones y cómo se relacionan.
• Mantén una jerarquía visual. Usa variant="primary" en el botón de la acción principal y variant="secondary" o variant="tertiary" en las acciones de apoyo para dirigir la atención.
• No añadas demasiados botones. Una fila larga de opciones abruma a los comerciantes y dificulta la decisión.
• Usa un grupo segmentado para alternar opciones. Para opciones muy relacionadas, como cambiar de vista o de filtro, define gap="none" para unir los botones en un único control segmentado.
• Separa las acciones destructivas. Colócalas de forma deliberada y dales tone="critical" para que sean más difíciles de activar por accidente.

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

Consulta las buenas prácticas de Shopify para <s-button-group> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
gap	"base" | "none"	El espacio entre los botones del grupo. - base: espaciado estándar que ofrece una separación visual clara entre los botones. - none: sin espaciado, lo que crea un grupo de botones unidos.

Slots

Slot	Descripción
default	Los botones que se muestran dentro del componente de grupo de botones, organizados juntos como un conjunto coherente de acciones relacionadas.
primary-action	La acción principal de este grupo, mostrada con un alto énfasis visual. Acepta un único botón con variant="primary". Úsala para la acción principal que quieres que realicen los usuarios. No se puede usar cuando gap="none".
secondary-actions	Acciones de apoyo que se muestran con menos énfasis que la acción principal. Acepta uno o más componentes de botón con variant="secondary" o variant="auto". Úsalas para acciones alternativas o menos importantes.