SButton <s-button>

कोई action चलाता है या navigate करता है, जिसमें primary, secondary और tertiary variants, icons और loading state होते हैं। SButton Shopify के Polaris <s-button> web component का typed Vue 3 wrapper है।

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

Best practices

• साफ़ क्रिया वाला label दें। ठीक-ठीक बताएँ कि button क्या करता है, जैसे "Save", "Edit" या "Add tags"। Sentence case इस्तेमाल करें, "a" या "the" जैसे भराव वाले शब्द छोड़ दें, और विराम चिह्न न लगाएँ।
• tone="critical" को destructive actions के लिए बचाकर रखें। इसे सिर्फ़ तभी इस्तेमाल करें जब किसी action को पलटना मुश्किल या असंभव हो, और आम तौर पर tone को इस बात से मिलाएँ कि action कितना अहम है।
• Hierarchy को साफ़ दिखाएँ। मुख्य action को variant="primary", सहायक actions को variant="secondary" और अतिरिक्त actions को variant="tertiary" दें, ताकि merchants समझ सकें कि कौन-सा action सबसे अहम है।
• Buttons को एक जैसी जगहों पर रखें। अपने पूरे app में buttons को उन्हीं जगहों पर रखें, ताकि merchants सीख जाएँ कि उन्हें कहाँ ढूँढना है।
• सिर्फ़ icon वाले buttons को label दें। अगर किसी button में icon है और text नहीं, तो उसे एक accessibilityLabel दें जो screen reader users को बताए कि वह क्या करता है।

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

सभी सुझावों के लिए <s-button> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

PrimarySecondaryTertiaryCritical

LoadingDisabled

Clicked 0 times

<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	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	यह सेट करता है कि इस clickable के activate होने पर commandFor कौन-सा action ले। हर component कौन-से actions सपोर्ट करता है, यह जानने के लिए उसका documentation देखें। - --auto: target component के लिए एक default action। - --show: target component दिखाता है। - --hide: target component छिपाता है। - --toggle: target component toggle करता है। - --copy: target ClipboardItem copy करता है।
commandFor	string	उस component की ID जिसे इस component पर activations (जैसे clicks) पर प्रतिक्रिया देनी चाहिए। target का behavior नियंत्रित करने के लिए command देखें।
disabled	boolean	Button को disable करता है, यानी उस पर click नहीं किया जा सकता और उसे focus नहीं मिल सकता।
download	string	browser linked URL को download की तरह मानता है, और string file का नाम होती है। download केवल same-origin URLs या blob: और data: schemes के लिए काम करता है।
href	string	link किया जाने वाला URL। - अगर सेट है, तो click event चलने के बाद यह href में बताई गई location पर navigate करेगा। - अगर commandFor सेट है, तो navigation के बजाय command execute होगा।
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	button के अंदर दिखाया जाने वाला icon, जो आमतौर पर button text से पहले होता है। users को button का action जल्दी पहचानने में मदद करने या scannability बेहतर करने के लिए icons का उपयोग करें। icon library का कोई भी icon नाम या कोई custom string identifier स्वीकार करता है।
inlineSize	"auto" | "fill" | "fit-content"	Button की दिखाई देने वाली inline चौड़ाई। - auto: button का आकार surface और context पर निर्भर करता है। - fill: button उपलब्ध inline size का 100% घेरता है। - fit-content: button अपनी सामग्री को समाने के लिए आवश्यक न्यूनतम inline-size घेरता है।
interestFor	string	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
lang	string	text सामग्री की भाषा। इसका उपयोग तब करें जब text page के बाकी हिस्से से अलग भाषा में हो, ताकि screen readers जैसी assistive technologies सही उच्चारण का उपयोग कर सकें। मान IANA language subtag registry का एक मान्य language subtag होना चाहिए।
loading	boolean	background action चलने के दौरान content की जगह loading indicator दिखाता है। यह Button को disable भी करता है।
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	बताता है कि linked URL कहाँ दिखाया जाए।
tone	"auto" | "neutral" | "critical"	component का semantic अर्थ और color treatment। - critical: तत्काल समस्याएँ या destructive actions। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी।
type	"button" | "reset" | "submit"	Button का behavior। - submit: बताता है कि component submit button की तरह काम करता है, यानी यह सबसे नज़दीकी form को submit करता है। - button: बताता है कि component एक button की तरह काम करता है, यानी इसका कोई default action नहीं है। - reset: बताता है कि component reset button की तरह काम करता है, यानी यह सबसे नज़दीकी form को reset करता है (fields को उनकी default values पर लौटाता है)। अगर component href या commandFor/command सपोर्ट करता है और उनमें से कोई सेट है, तो इस property को नज़रअंदाज़ किया जाता है।
variant	"auto" | "primary" | "secondary" | "tertiary"	button component का visual रूप। - auto: variant button component के context के आधार पर अपने आप तय होता है। - primary: page पर प्राथमिक action के लिए उच्च emphasis वाला button। इसका उपयोग संयम से करें। - secondary: secondary actions के लिए मध्यम emphasis वाला button। - tertiary: कम महत्वपूर्ण actions के लिए कम emphasis वाला button।

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Events

Event	Type
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

इन्हें <SButton> पर @blur जैसे listeners से सुनें।

Slots

Slot	विवरण
default	button component के अंदर दिखाई जाने वाला label text या elements, जो बताते हैं कि click करने पर कौन-सा action होगा।