SButton <s-button>

Kích hoạt một hành động hoặc điều hướng, có các biến thể primary, secondary, tertiary, icon và trạng thái loading. SButton là Vue 3 wrapper có type cho web component <s-button> của Shopify Polaris.

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

Best practices

• Đặt nhãn bằng một động từ rõ ràng. Nói chính xác button làm gì, như "Save", "Edit" hay "Add tags". Dùng kiểu viết hoa chữ đầu câu (sentence case), bỏ các từ thừa như "a" hay "the", và không dùng dấu câu.
• Chỉ dùng tone="critical" cho hành động phá hủy. Chỉ dùng nó khi một hành động khó hoặc không thể hoàn tác, và nhìn chung hãy chọn tone tương xứng với mức độ quan trọng của hành động.
• Làm cho thứ bậc thật rõ ràng. Gán variant="primary" cho hành động chính, variant="secondary" cho hành động hỗ trợ, và variant="tertiary" cho hành động bổ sung, để người bán biết hành động nào quan trọng nhất.
• Đặt button nhất quán. Đặt button ở cùng vị trí trong toàn bộ app để người bán quen biết chỗ tìm chúng.
• Gắn nhãn cho button chỉ có icon. Nếu button có icon mà không có văn bản, hãy gán accessibilityLabel cho biết nó làm gì với người dùng trình đọc màn hình.

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

Xem best practices của Shopify cho <s-button> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của component cho các công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này để cung cấp thêm ngữ cảnh khi riêng nội dung hiển thị chưa thể hiện rõ mục đích của component.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Đặt hành động mà commandFor sẽ thực hiện khi phần tử có thể nhấp này được kích hoạt. Xem tài liệu của từng component để biết các hành động mà chúng hỗ trợ. - --auto: hành động mặc định cho component đích. - --show: hiển thị component đích. - --hide: ẩn component đích. - --toggle: bật/tắt component đích. - --copy: sao chép ClipboardItem đích.
commandFor	string	ID của một component sẽ phản hồi khi component này được kích hoạt (ví dụ: nhấp). Xem command để biết cách điều khiển hành vi của component đích.
disabled	boolean	Vô hiệu hóa Button, nghĩa là không thể nhấp hoặc nhận focus.
download	string	Khiến trình duyệt coi URL được liên kết là một tệp tải xuống, với chuỗi này là tên tệp. Tải xuống chỉ hoạt động với URL cùng origin hoặc các scheme blob: và data:.
href	string	URL để liên kết tới. - Nếu được đặt, nó sẽ điều hướng tới vị trí do href chỉ định sau khi thực thi event click. - Nếu commandFor được đặt, command sẽ được thực thi thay cho việc điều hướng.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Icon hiển thị bên trong nút, thường được đặt trước văn bản của nút. Dùng icon để giúp người dùng nhanh chóng nhận ra hành động của nút hoặc để dễ quét nhanh hơn. Chấp nhận bất kỳ tên icon nào từ thư viện icon hoặc một chuỗi định danh tùy chỉnh.
inlineSize	"auto" | "fill" | "fit-content"	Chiều rộng inline hiển thị của Button. - auto: kích thước của nút phụ thuộc vào bề mặt và ngữ cảnh. - fill: nút sẽ chiếm 100% kích thước inline khả dụng. - fit-content: nút sẽ chiếm kích thước inline tối thiểu cần thiết để vừa nội dung.
interestFor	string	ID của một component sẽ phản hồi khi có sự chú ý (ví dụ: hover và focus) trên component này.
lang	string	Ngôn ngữ của nội dung văn bản. Dùng khi văn bản ở ngôn ngữ khác với phần còn lại của trang, giúp công nghệ hỗ trợ như trình đọc màn hình phát âm đúng. Giá trị phải là một language subtag hợp lệ từ IANA language subtag registry.
loading	boolean	Thay nội dung bằng chỉ báo đang tải trong khi một hành động chạy nền đang được thực hiện. Điều này cũng vô hiệu hóa Button.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Chỉ định nơi hiển thị URL được liên kết.
tone	"auto" | "neutral" | "critical"	Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy. - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể.
type	"button" | "reset" | "submit"	Hành vi của Button. - submit: Cho biết component hoạt động như nút submit, nghĩa là nó submit form gần nhất. - button: Cho biết component hoạt động như một nút, nghĩa là nó không có hành động mặc định. - reset: Cho biết component hoạt động như nút reset, nghĩa là nó reset form gần nhất (đưa các trường về giá trị mặc định). Thuộc tính này bị bỏ qua nếu component hỗ trợ href hoặc commandFor/command và một trong số đó được đặt.
variant	"auto" | "primary" | "secondary" | "tertiary"	Giao diện trực quan của component button. - auto: Variant được xác định tự động dựa trên ngữ cảnh của component button. - primary: Nút nhấn mạnh cao dành cho hành động chính trên trang. Nên dùng hạn chế. - secondary: Nút nhấn mạnh trung bình dành cho hành động phụ. - tertiary: Nút nhấn mạnh thấp dành cho hành động ít quan trọng hơn.

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Events

Event	Kiểu
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Lắng nghe các event này bằng listener dạng @blur trên <SButton>.

Slots

Slot	Mô tả
default	Văn bản hoặc phần tử nhãn hiển thị bên trong component button, mô tả hành động sẽ được thực hiện khi nhấp.