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

Badge

ป้ายสถานะสั้นๆ ที่กดไม่ได้

ui/feedback.tsxServer safe

โทนและรูปแบบ

ร่างใหม่กำลังเรียนกำลังสอนสดรอตรวจยกเลิก

tsx

<Badge>ร่าง</Badge>
<Badge tone="accent">ใหม่</Badge>
<Badge tone="success" dot>กำลังสอน</Badge>
<Badge tone="warning">รอตรวจ</Badge>
<Badge tone="danger" variant="solid">ปิดรับ</Badge>
<Badge tone="info" variant="outline">ฟรี</Badge>

Solid และ outline

แนะนำปิดรับฟรี12 บทเรียน

tsx

<Badge tone="accent" variant="solid">แนะนำ</Badge>

Props

Prop	Type	Default	คำอธิบาย
`tone`	`"neutral" \| "accent" \| "info" \| "success" \| "warning" \| "danger"`	`"neutral"`	ความหมาย
`variant`	`"soft" \| "solid" \| "outline"`	`"soft"`	น้ำหนักทางสายตา
`size`	`"md" \| "lg"`	`"md"`	สูง 24 หรือ 28 px
`dot`	`boolean`	`false`	จุดนำหน้า ใช้เมื่อเป็นสถานะสด เช่น ออนไลน์

ใช้เมื่อไร

ควรทำ

หนึ่งถึงสองคำ
ใช้โทนเดียวกันกับสถานะเดียวกันทุกหน้า

ไม่ควรทำ

ทำให้กดได้ ใช้ Tag แทน
ใส่จุดสีทุก badge เพื่อตกแต่ง