คอมโพเนนต์ทั้งหมด

Button

หกรูปแบบ สามขนาด รองรับไอคอน ลูกศร และสถานะกำลังโหลด

ui/button.tsxServer safe

รูปแบบ

primary หนึ่งปุ่มต่อหน้าจอ secondary สำหรับทางเลือกที่สำคัญรองลงมา outline และ ghost สำหรับการกระทำที่เบากว่า danger เมื่อย้อนกลับไม่ได้

tsx

<Button variant="primary">เริ่มเรียน</Button>
<Button>ดูตัวอย่าง</Button>
<Button variant="outline">บันทึกร่าง</Button>
<Button variant="ghost">ยกเลิก</Button>
<Button variant="danger">ลบคอร์ส</Button>
<Button variant="link">ดูรายละเอียด</Button>

ลูกศรประจำแบรนด์

ASWINOLOGY° วาดลูกศรในวงกลมหมึกที่เลื่อนทแยงเมื่อชี้ Lurnelle ใช้ลูกศรธรรมดาท้ายข้อความ ใช้กับการกระทำที่พาไปหน้าถัดไป

ดูคอร์สทั้งหมด aswinology.com อ่านต่อ

tsx

<Button variant="primary" arrow href="/courses">ดูคอร์สทั้งหมด</Button>
<Button arrow="diagonal" href="https://aswinology.com">aswinology.com</Button>

ขนาด

sm 36 px สำหรับแถบเครื่องมือและตาราง md 44 px เป็นค่าเริ่มต้น lg 52 px สำหรับ CTA หลักของหน้า พื้นที่กดไม่ต่ำกว่า 24 px ทุกขนาด

tsx

<Button size="sm">เล็ก</Button>
<Button>ปกติ</Button>
<Button size="lg" variant="primary">ใหญ่</Button>

กับไอคอน

ไอคอนเป็น children ขนาดปรับตามปุ่ม ปุ่มไอคอนอย่างเดียวต้องมี aria-label

tsx

<Button variant="primary"><Plus aria-hidden="true" />สร้างคอร์ส</Button>
<Button>ดาวน์โหลด<DownloadSimple aria-hidden="true" /></Button>
<Button iconOnly variant="ghost" aria-label="ค้นหา"><MagnifyingGlass aria-hidden="true" /></Button>

สถานะ

loading ล็อกปุ่มและคงความกว้างเดิมไว้ กดเพื่อดูการทำงาน disabled ใช้เมื่อเงื่อนไขยังไม่ครบ และควรบอกเหตุผลใกล้ๆ ปุ่ม

tsx

<Button variant="primary" loading={submitting}>ส่งงาน</Button>
<Button disabled>ปิดรับสมัคร</Button>

เป็นลิงก์

ส่ง href จะได้แท็ก a ส่ง as เพื่อใช้ Link ของ Next.js หรือ router อื่น

ดูแพ็กเกจ ดูคอร์ส

tsx

import Link from "next/link";

<Button href="/plans">ดูแพ็กเกจ</Button>
<Button as={Link} href="/courses" variant="primary">ดูคอร์ส</Button>

เต็มความกว้าง

ใช้ในการ์ดแคบ ฟอร์มบนมือถือ และหน้าเข้าสู่ระบบ

tsx

<Button variant="primary" full>เข้าสู่ระบบ</Button>

Props

Prop	Type	Default	คำอธิบาย
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "danger" \| "link"`	`"secondary"`	น้ำหนักของการกระทำ
`size`	`"sm" \| "md" \| "lg"`	`"md"`	ความสูง 36 / 44 / 52 px
`arrow`	`boolean \| "diagonal"`	`false`	ลูกศรท้ายปุ่มตามแบบของแบรนด์ diagonal สำหรับลิงก์ออกนอกเว็บ
`loading`	`boolean`	`false`	แสดงจุดรอ ล็อกปุ่ม ตั้ง aria-busy
`iconOnly`	`boolean`	`false`	ปุ่มสี่เหลี่ยมจัตุรัสสำหรับไอคอนเดียว ต้องมี aria-label
`full`	`boolean`	`false`	กว้างเต็มพื้นที่
`href`	`string`	`-`	แสดงเป็นแท็ก a
`as`	`ElementType`	`"button"`	แสดงเป็นคอมโพเนนต์อื่น เช่น Link
`...props`	`ButtonHTMLAttributes`	`-`	type, onClick, disabled และอื่นๆ type เริ่มต้นเป็น button

type เริ่มต้นเป็น button จึงไม่ส่งฟอร์มโดยไม่ตั้งใจ ใช้ type="submit" เมื่อต้องการส่ง
สถานะโฟกัสเป็นเส้นสีหมึกพร้อมวงสีแบรนด์ เห็นได้ทั้งพื้นสว่างและมืด
loading ตั้ง aria-busy และมีข้อความกำลังโหลดให้โปรแกรมอ่านหน้าจอ
ปุ่มลิงก์ที่ปิดใช้งานได้ aria-disabled เพราะแท็ก a ไม่มี disabled

ใช้เมื่อไร

ควรทำ

ขึ้นต้นด้วยกริยา สั้นไม่เกินสามคำ
primary หนึ่งปุ่มต่อหน้าจอ
วางปุ่มยืนยันไว้ขวาสุดในแถวปุ่มของ Dialog

ไม่ควรทำ

ใช้ danger กับการกระทำที่ย้อนกลับได้
ใช้ข้อความซ้ำความหมายกันในหน้าเดียว เช่น ติดต่อเรา กับ คุยกัน
ปิดปุ่มโดยไม่บอกเหตุผล