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"을 설정해 버튼들을 하나의 세그먼트 컨트롤로 합칩니다.
• 파괴적인 액션은 따로 두세요. 신중하게 배치하고 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"인 버튼 컴포넌트를 하나 이상 받습니다. 대체 액션이나 덜 중요한 액션에 사용하세요.