SButton <s-button>

Déclenche une action ou une navigation, avec des variantes primary, secondary et tertiary, des icônes et un état de chargement. SButton est le wrapper Vue 3 typé du web component <s-button> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez un verbe clair comme libellé. Dites exactement ce que fait le bouton, comme "Save", "Edit" ou "Add tags". N'utilisez une majuscule qu'en début de libellé, évitez les mots de remplissage comme "a" ou "the" et omettez la ponctuation.
• Réservez tone="critical" aux actions destructives. Ne l'utilisez que lorsqu'une action est difficile, voire impossible, à annuler et, plus généralement, adaptez le ton à l'importance de l'action.
• Rendez la hiérarchie évidente. Donnez variant="primary" à l'action principale, variant="secondary" aux actions secondaires et variant="tertiary" aux actions complémentaires, pour que les marchands sachent quelle action compte le plus.
• Placez les boutons de façon cohérente. Mettez les boutons aux mêmes endroits dans toute votre app pour que les marchands apprennent où les chercher.
• Ajoutez un libellé aux boutons à icône seule. Si un bouton a une icône sans texte, donnez-lui un accessibilityLabel qui indique aux utilisateurs de lecteur d'écran ce qu'il fait.

<SButton icon="edit" accessibilityLabel="Edit product" />

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

Exemple

PrimarySecondaryTertiaryCritical

LoadingDisabled

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SButton } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
    <SButton variant="primary">Primary</SButton>
    <SButton variant="secondary">Secondary</SButton>
    <SButton variant="tertiary">Tertiary</SButton>
    <SButton tone="critical">Critical</SButton>
  </div>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px;">
    <SButton loading>Loading</SButton>
    <SButton disabled>Disabled</SButton>
  </div>
  <div style="margin-top: 8px;">
    <SButton @click="clicks++">Clicked {{ clicks }} times</SButton>
  </div>
</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.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Définit l'action que le commandFor doit effectuer lorsque cet élément cliquable est activé. Consultez la documentation de chaque composant pour connaître les actions prises en charge. - --auto : une action par défaut pour le composant cible. - --show : affiche le composant cible. - --hide : masque le composant cible. - --toggle : bascule le composant cible. - --copy : copie le ClipboardItem cible.
commandFor	string	ID d'un composant qui doit réagir aux activations (p. ex. clics) sur ce composant. Consultez command pour savoir comment contrôler le comportement de la cible.
disabled	boolean	Désactive le Button : il ne peut plus être cliqué ni recevoir le focus.
download	string	Indique au navigateur de traiter l'URL liée comme un téléchargement, la chaîne servant de nom de fichier. Le téléchargement ne fonctionne que pour les URL de même origine ou les schémas blob: et data:.
href	string	L'URL cible du lien. - Si elle est définie, la navigation vers l'emplacement indiqué par href a lieu après l'exécution de l'événement click. - Si un commandFor est défini, la command est exécutée à la place de la navigation.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Une icône affichée dans le bouton, généralement placée avant son texte. Utilisez des icônes pour aider les utilisateurs à identifier rapidement l'action du bouton ou pour améliorer la lisibilité. Accepte n'importe quel nom d'icône de la bibliothèque d'icônes ou un identifiant personnalisé sous forme de chaîne.
inlineSize	"auto" | "fill" | "fit-content"	La largeur inline affichée du Button. - auto : la taille du bouton dépend de la surface et du contexte. - fill : le bouton occupe 100 % de la taille inline disponible. - fit-content : le bouton occupe la taille inline minimale nécessaire pour contenir son contenu.
interestFor	string	ID d'un composant qui doit réagir à l'intérêt (p. ex. survol et focus) porté à ce composant.
lang	string	La langue du contenu textuel. Utilisez cette option lorsque le texte est dans une langue différente du reste de la page, afin que les technologies d'assistance comme les lecteurs d'écran utilisent la bonne prononciation. La valeur doit être une sous-étiquette de langue valide du registre des sous-étiquettes de langue de l'IANA.
loading	boolean	Remplace le contenu par un indicateur de chargement pendant l'exécution d'une action en arrière-plan. Désactive également le Button.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Indique où afficher l'URL liée.
tone	"auto" | "neutral" | "critical"	La signification sémantique et le traitement des couleurs du composant. - critical : problèmes urgents ou actions destructrices. - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière.
type	"button" | "reset" | "submit"	Le comportement du Button. - submit : indique que le composant agit comme un bouton d'envoi, c'est-à-dire qu'il soumet le formulaire le plus proche. - button : indique que le composant agit comme un bouton, c'est-à-dire sans action par défaut. - reset : indique que le composant agit comme un bouton de réinitialisation, c'est-à-dire qu'il réinitialise le formulaire le plus proche (en rétablissant les valeurs par défaut des champs). Cette propriété est ignorée si le composant prend en charge href ou commandFor/command et que l'une d'elles est définie.
variant	"auto" | "primary" | "secondary" | "tertiary"	L'apparence visuelle du composant button. - auto : la variante est déterminée automatiquement selon le contexte du composant button. - primary : bouton à forte mise en évidence pour l'action principale de la page. À utiliser avec parcimonie. - secondary : bouton à mise en évidence moyenne pour les actions secondaires. - tertiary : bouton à faible mise en évidence pour les actions moins importantes.

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).

Events

Event	Type
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Écoutez-les avec des listeners de la forme @blur sur <SButton>.

Slots

Slot	Description
default	Le texte du libellé ou les éléments affichés dans le composant button, décrivant l'action effectuée lors du clic.