SButton `<s-button>`

アクションを実行したりページを移動したりするボタン。primary、secondary、tertiary のバリアント、アイコン、ローディング状態に対応します。 SButton は、Shopify Polaris の <s-button> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

明確な動詞でラベルを付ける。 「Save」「Edit」「Add tags」のように、ボタンが何をするのかを正確に示します。センテンスケースを使い、「a」や「the」のような不要な語は省き、句読点も付けません。
tone="critical" は破壊的なアクションのためにとっておく。 元に戻すのが難しい、または不可能なアクションにだけ使い、一般的にはアクションの重要度に合わせてトーンを選びます。
階層をはっきりさせる。 メインのアクションには variant="primary"、補助的なアクションには variant="secondary"、付加的なものには variant="tertiary" を付け、どのアクションが最も重要かをマーチャントが判断できるようにします。
ボタンを一貫した位置に置く。 アプリ全体で同じ場所にボタンを配置し、マーチャントがどこを見ればよいか覚えられるようにします。
アイコンのみのボタンにはラベルを付ける。 ボタンにアイコンがあってテキストがない場合は、何をするボタンかをスクリーンリーダーのユーザーに伝える accessibilityLabel を設定します。

vue

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

詳しいガイダンスについては、<s-button> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Primary

Secondary

Tertiary

Critical

Disabled

Clicked 0 times

vue

<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	型	説明
`accessibilityLabel`	`string`	スクリーンリーダーなどの支援技術向けに、コンポーネントの目的や内容を説明するラベルです。表示されているコンテンツだけではコンポーネントの目的が明確に伝わらない場合に、追加のコンテキストを提供するために使用します。
`command`	`"--auto" \| "--show" \| "--hide" \| "--toggle" \| "--copy"`	このクリック可能な要素がアクティブになったときに `commandFor` が実行するアクションを設定します。サポートされるアクションについては、各コンポーネントのドキュメントを参照してください。 - `--auto`: ターゲットコンポーネントのデフォルトのアクション。 - `--show`: ターゲットコンポーネントを表示します。 - `--hide`: ターゲットコンポーネントを非表示にします。 - `--toggle`: ターゲットコンポーネントの表示を切り替えます。 - `--copy`: ターゲットの ClipboardItem をコピーします。
`commandFor`	`string`	このコンポーネントのアクティベーション（クリックなど）に応答するコンポーネントの ID です。ターゲットの動作を制御する方法については `command` を参照してください。
`disabled`	`boolean`	Button を無効にし、クリックやフォーカスを受け付けないようにします。
`download`	`string`	ブラウザーにリンク先の URL をダウンロードとして扱わせ、文字列をファイル名として使用します。ダウンロードは同一オリジンの URL、または `blob:` および `data:` スキームでのみ機能します。
`href`	`string`	リンク先の URL です。 - 設定すると、`click` イベントの実行後に `href` で指定された場所へ移動します。 - `commandFor` が設定されている場合は、ナビゲーションの代わりに `command` が実行されます。
`icon`	`"color" \| "info" \| "adjust" \| "affiliate" \| "airplane" \| "alert-bubble" \| "alert-circle" \| "alert-diamond" … (553 more)`	ボタン内に表示されるアイコンで、通常はボタンテキストの前に配置されます。ユーザーがボタンのアクションをすばやく識別できるようにしたり、一覧性を高めたりするためにアイコンを使用します。アイコンライブラリの任意のアイコン名、またはカスタムの文字列識別子を受け付けます。
`inlineSize`	`"auto" \| "fill" \| "fit-content"`	Button の表示上のインライン幅です。 - `auto`: ボタンのサイズはサーフェスとコンテキストによって決まります。 - `fill`: ボタンは利用可能なインラインサイズの 100% を占めます。 - `fit-content`: ボタンはコンテンツが収まるのに必要な最小のインラインサイズを占めます。
`interestFor`	`string`	このコンポーネントへのインタレスト（ホバーやフォーカスなど）に応答するコンポーネントの ID です。
`lang`	`string`	テキストコンテンツの言語です。テキストがページの他の部分と異なる言語の場合に使用し、スクリーンリーダーなどの支援技術が正しい発音を使えるようにします。値は IANA 言語サブタグレジストリの有効な言語サブタグである必要があります。
`loading`	`boolean`	バックグラウンドのアクションの実行中、コンテンツを読み込みインジケーターに置き換えます。Button も無効になります。
`target`	`"auto" \| "_blank" \| "_self" \| "_parent" \| "_top"`	リンク先の URL を表示する場所を指定します。
`tone`	`"auto" \| "neutral" \| "critical"`	コンポーネントのセマンティックな意味と色の扱いです。 - `critical`: 緊急の問題や破壊的なアクション。 - `auto`: コンテキストに基づいて自動的に決定されます。 - `neutral`: 特定の意図を持たない一般的な情報。
`type`	`"button" \| "reset" \| "submit"`	Button の動作です。 - `submit`: コンポーネントが送信ボタンとして機能し、最も近いフォームを送信することを示します。 - `button`: コンポーネントがボタンとして機能し、デフォルトのアクションを持たないことを示します。 - `reset`: コンポーネントがリセットボタンとして機能し、最も近いフォームをリセットする（フィールドをデフォルト値に戻す）ことを示します。コンポーネントが `href` または `commandFor`/`command` をサポートしていて、そのいずれかが設定されている場合、このプロパティは無視されます。
`variant`	`"auto" \| "primary" \| "secondary" \| "tertiary"`	ボタンコンポーネントの見た目です。 - `auto`: バリアントはボタンコンポーネントのコンテキストによって自動的に決定されます。 - `primary`: ページ上の主要なアクションのための強調度の高いボタンです。使用は控えめにしてください。 - `secondary`: セカンダリアクションのための中程度の強調度のボタンです。 - `tertiary`: 重要度の低いアクションのための強調度の低いボタンです。

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

Events

Event	型
`blur`	`FocusEvent`
`click`	`MouseEvent`
`focus`	`FocusEvent`

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

Slots

Slot	説明
`default`	ボタンコンポーネント内に表示されるラベルテキストまたは要素です。クリックしたときに実行されるアクションを説明します。

SButton <s-button> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

Slots ​

SButton `<s-button>`

ベストプラクティス

例

Props

Events

Slots