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"처럼 버튼이 하는 일을 정확히 말합니다. 문장형 대소문자(sentence case)를 사용하고, "a"나 "the" 같은 불필요한 단어와 문장 부호는 생략합니다.
tone="critical"은 파괴적인 액션에만 사용하세요. 되돌리기 어렵거나 불가능한 액션에만 사용하고, 일반적으로 액션의 중요도에 맞는 tone을 고릅니다.
위계를 분명히 하세요. 주요 액션에는 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 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
`default`	버튼 컴포넌트 안에 표시되는 레이블 텍스트 또는 요소로, 클릭 시 수행될 액션을 설명합니다.

SButton <s-button> ​

모범 사례 ​

예시 ​

Props ​

Events ​

Slots ​

SButton `<s-button>`

모범 사례

예시

Props

Events

Slots