SButtonGroup <s-button-group>

Regroupe un ensemble de boutons liés, comme une action principale et ses actions secondaires. SButtonGroup est le wrapper Vue 3 typé du web component <s-button-group> de Shopify Polaris.

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

Bonnes pratiques

• Regroupez les actions liées. Rassemblez les appels à l'action qui relèvent de la même tâche pour que les marchands voient leurs options et leurs relations.
• Conservez une hiérarchie visuelle. Utilisez variant="primary" sur le bouton de l'action principale et variant="secondary" ou variant="tertiary" sur les actions secondaires pour orienter l'attention.
• N'ajoutez pas trop de boutons. Une longue rangée de choix submerge les marchands et complique la décision.
• Utilisez un groupe segmenté pour les bascules. Pour des options étroitement liées, comme le changement de vue ou de filtre, définissez gap="none" afin de réunir les boutons en un seul contrôle segmenté.
• Isolez les actions destructives. Placez-les de façon réfléchie et donnez-leur tone="critical" pour qu'elles soient plus difficiles à déclencher par accident.

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

Consultez les bonnes pratiques de Shopify pour <s-button-group> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à exprimer clairement l'objectif du composant.
gap	"base" | "none"	L'espacement entre les boutons du groupe. - base : espacement standard offrant une séparation visuelle nette entre les boutons. - none : aucun espacement, créant un groupe de boutons accolés.

Slots

Slot	Description
default	Les boutons affichés dans le composant groupe de boutons, disposés ensemble comme un ensemble cohérent d'actions liées.
primary-action	L'action principale de ce groupe, affichée avec une forte mise en évidence visuelle. Accepte un seul bouton avec variant="primary". Utilisez-le pour l'action principale que les utilisateurs doivent effectuer. Ne peut pas être utilisé lorsque gap="none".
secondary-actions	Actions complémentaires affichées avec moins d'emphase que l'action principale. Accepte un ou plusieurs composants bouton avec variant="secondary" ou variant="auto". Utilisez-les pour des actions alternatives ou moins importantes.