SPressButton <s-press-button>

押された状態と押されていない状態を保持するトグルボタン。モードやフィルターのオン・オフに使います。 SPressButton は、Shopify Polaris の <s-press-button> web component 向けの型付き Vue 3 wrapper です。

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

例

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	型	説明
accessibilityLabel	string	Button の目的や内容を説明するラベルです。スクリーンリーダーなどの支援技術を使用するユーザーに読み上げられます。アイコンのみを使用する場合や、Button のテキストだけでは支援技術を使用するユーザーにとってコンテキストが不十分な場合に使用します。
defaultPressed	boolean	ボタンがデフォルトで押された状態かどうか。
disabled	boolean	Button を無効にし、クリックやフォーカスを受け付けないようにします。
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Button に表示するアイコンのタイプです。
inlineSize	"auto" | "fill" | "fit-content"	Button の表示上のインライン幅です。 - auto: ボタンのサイズはサーフェスとコンテキストによって決まります。 - fill: ボタンは利用可能なインラインサイズの 100% を占めます。 - fit-content: ボタンはコンテンツが収まるのに必要な最小のインラインサイズを占めます。
lang	string	テキストの言語を示します。テキストがページの他の部分と異なる言語である場合に便利です。スクリーンリーダーなどの支援技術が正しい発音を使用できるようになります。値のリファレンス（"subtag" ラベル）
loading	boolean	バックグラウンドのアクションの実行中、コンテンツを読み込みインジケーターに置き換えます。Button も無効になります。
pressed	boolean	ボタンが押された状態かどうか。
tone	"neutral"	伝える情報の意図に基づいて Button のトーンを設定します。
variant	"secondary" | "tertiary"	Button の外観を変更します。

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Events

Event	型
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

これらのイベントは <SPressButton> 上で @blur 形式のリスナーで受け取れます。

Slots

Slot	説明
default	PressButton のコンテンツです。