SButtonGroup <s-button-group>

メインのアクションとそのサブアクションなど、関連するボタンをまとめて配置します。 SButtonGroup は、Shopify Polaris の <s-button-group> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 関連するアクションをまとめる。 同じタスクに属するコールトゥアクションをグループ化し、マーチャントが選択肢とその関係を把握できるようにします。
• 視覚的な階層を保つ。 メインのアクションのボタンには variant="primary" を、補助的なものには variant="secondary" または variant="tertiary" を使い、注目を誘導します。
• ボタンを増やしすぎない。 選択肢が長く並ぶとマーチャントは圧倒され、判断しにくくなります。
• 切り替えにはセグメント化したグループを使う。 ビューやフィルターの切り替えのように密接に関連する選択肢では、gap="none" を設定してボタンを 1 つのセグメントコントロールにつなげます。
• 破壊的なアクションは区別する。 意図的な位置に配置し、tone="critical" を付けて、誤って実行されにくくします。

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

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

例

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	型	説明
accessibilityLabel	string	スクリーンリーダーなどの支援技術向けに、コンポーネントの目的や内容を説明するラベルです。表示されているコンテンツだけではコンポーネントの目的が明確に伝わらない場合に、追加のコンテキストを提供するために使用します。
gap	"base" | "none"	グループ内のボタン間の間隔です。 - base: ボタン同士を視覚的に明確に区切る標準的な間隔です。 - none: 間隔をなくし、連結したボタングループを作成します。

Slots

Slot	説明
default	ボタングループコンポーネント内に表示されるボタンで、関連するアクションのまとまったセットとして並べて配置されます。
primary-action	このグループのメインアクションで、視覚的に強く強調して表示されます。variant="primary" の単一のボタンを受け付けます。ユーザーに実行してほしい主要なアクションに使用します。gap="none" の場合は使用できません。
secondary-actions	プライマリアクションよりも控えめに表示される補助的なアクションです。variant="secondary" または variant="auto" のボタンコンポーネントを 1 つ以上受け付けます。代替のアクションや重要度の低いアクションに使用します。