SPressButton <s-press-button>

Un bouton bascule qui reste enfoncé ou relâché, pour activer ou désactiver un mode ou un filtre. SPressButton est le wrapper Vue 3 typé du web component <s-press-button> de Shopify Polaris.

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

Exemple

SecondaryTertiaryDisabled

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

const pressed = ref(false)
</script>

<template>
  <!-- SPressButton is a toggle-style button (aria-pressed) — pressed/defaultPressed
       control the on/off state instead of a click counter. -->
  <SPressButton icon="star" accessibilityLabel="Favorite" :pressed="pressed" @click="pressed = !pressed" />
  <SPressButton variant="secondary">Secondary</SPressButton>
  <SPressButton variant="tertiary">Tertiary</SPressButton>
  <SPressButton disabled>Disabled</SPressButton>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du Button. Il est lu aux utilisateurs de technologies d'assistance comme les lecteurs d'écran. Utilisez-le lorsque le bouton ne contient qu'une icône ou que son texte n'apporte pas assez de contexte aux utilisateurs de technologies d'assistance.
defaultPressed	boolean	Indique si le bouton est enfoncé par défaut.
disabled	boolean	Désactive le Button : il ne peut plus être cliqué ni recevoir le focus.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Le type d'icône à afficher dans le Button.
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.
lang	string	Indique la langue du texte. Utile lorsque le texte est dans une autre langue que le reste de la page. Cela permet aux technologies d'assistance comme les lecteurs d'écran d'utiliser la bonne prononciation. Référence des valeurs (libellé "subtag")
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.
pressed	boolean	Indique si le bouton est enfoncé.
tone	"neutral"	Définit le ton du Button selon l'intention de l'information transmise.
variant	"secondary" | "tertiary"	Modifie l'apparence visuelle du Button.

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 <SPressButton>.

Slots

Slot	Description
default	Le contenu du PressButton.