Badges & Tags

Badges (Status Badges)

Badge คือ pill สถานะสำหรับบอกสถานะข้อมูล (Approved / Pending / Rejected …) — ใช้ status.100 เป็นพื้นหลัง และ status.800 เป็นตัวอักษร (solid) หรือ status.50 เป็นพื้นหลัง และ status.600 เป็นตัวอักษร (soft) ตาม HTML source of truth ส่วน dot ตัวเล็กใช้ status.600

รูปแบบ	พื้นหลัง	ตัวอักษร	dot
solid	`status.100`	`status.800`	`status.600`
soft	`status.50`	`status.600`	`status.600`

Badge จริง · solid (ซ้าย) / soft + dot (ขวา)

ApprovedPendingRejectedDraftCompleteExpiringOfflineArchived

solid badge = status.100 bg / status.800 text · soft badge = status.50 bg / status.600 text — ตาม bgrimm-design-preview_5.html

สีทั้งชุด

token	พื้นหลัง (solid)	ตัวอักษร	dot (600)	พื้นหลัง (soft)	ตัวอักษร soft
`badge.success`	`#C8F2DD`	`#0F6A46`	`#22A06B`	`#EAFBF3`	`#22A06B`
`badge.warning`	`#FFE9A8`	`#9A7000`	`#D4A017`	`#FFF9E6`	`#D4A017`
`badge.error`	`#FFD1CD`	`#A92E2A`	`#D64541`	`#FFF0EF`	`#D64541`
`badge.neutral`	`#D9DAE4`	`#3E4048`	`#63666F`	`#EBECF0`	`#63666F`
`badge.brand`	`#FFD4BB`	`#7A1F00`	`#FF6727`	—	—

สเปก: font-size: 12px · font-weight: 500 · padding: 3px 12px · border-radius: 9999px · dot ขนาด 7px ช่องว่างจากตัวอักษร 6px

กติกา

solid badge (100/800) ใช้กับสถานะหลักในตาราง/การ์ด เช่น Approved, Pending, Rejected
soft badge (50/600) ใช้เมื่อต้องการน้ำหนักเบาลง เช่น สถานะรอง, badge จำนวนมากพร้อมกัน
dot badge ใช้คู่กับข้อความสั้น หรือเป็น indicator ข้างชื่อ — dot เป็น status.600 เสมอ
ตัวอักษรบน solid ใช้ status.800 เพราะ contrast ผ่าน AA (เช่น #0F6A46 บน #C8F2DD) — ห้ามใช้ status.600 เป็นตัวอักษรบนพื้น 100 เพราะ contrast ไม่พอ (warning.600 = 2.38:1)
badge มีความหมาย → ต้องมี text อ่านรู้เรื่อง ไม่ใช้ dot เปล่าๆ สื่อสถานะคนเดียว (WCAG 1.4.1)

Tags

Tag คือ label สั้นใช้จัดหมวด/ติดป้ายข้อมูล (ต่างจาก badge ตรงที่ใช้บอก หมวดหมู่ ไม่ใช่ สถานะ) — border-radius: 4px · font-size: 12px · padding: 3px 10px

Solid

Tag solid จริง

B.Grimm PowerApprovedPendingRejectedDraftInactive

solid tag = status.100 bg / status.800 text — สีเดียวกับ solid badge แต่เหลี่ยมกว่า

Outlined

Tag outlined จริง · border 1.5px

BrandSuccessWarningErrorNeutral

outlined tag = พื้นโปร่งใส · border + ตัวอักษรเป็น status.600 (ยกเว้น neutral ใช้ border #C9CAD4 + ตัวอักษร #63666F)

token	พื้นหลัง	ตัวอักษร	border
`tag.brand-solid`	`#FFD4BB`	`#7A1F00`	—
`tag.success-solid`	`#C8F2DD`	`#0F6A46`	—
`tag.warning-solid`	`#FFE9A8`	`#9A7000`	—
`tag.error-solid`	`#FFD1CD`	`#A92E2A`	—
`tag.neutral-solid`	`#EBECF0`	`#63666F`	—
`tag.success-outline`	transparent	`#22A06B`	`#22A06B`
`tag.warning-outline`	transparent	`#D4A017`	`#D4A017`
`tag.error-outline`	transparent	`#D64541`	`#D64541`
`tag.neutral-outline`	transparent	`#63666F`	`#C9CAD4`

Chips

Chip คือ tag ที่มี interaction — ลบได้ (removable) หรือเลือกได้ (filter) — สี background ใช้ status.50 + border status.200 + ตัวอักษร status.600 ตามหมวด

Chip แบบลบได้

Energy ✕Pharma ✕Digital ✕

removable chip = status.50 bg + status.200 border + status.600 text — Energy #FFF1EA/#FFB088/#FF6727, Pharma #EAFBF3/#8DE5BA/#22A06B, Digital #EBECF0/#C9CAD4/#63666F

Filter chip · เลือกแล้ว (ซ้าย) / ยังไม่เลือก

✓ AllPowerPharmaMaritimeReal Estate

filter chip ที่เลือก = พื้น #FF6727 ตัวอักษรขาว · ยังไม่เลือก = #EBECF0/#63666F/#C9CAD4

แยก badge / tag / chip ให้ถูก

องค์ประกอบ	ใช้บอก	รูปทรง	ตัวอย่าง
Badge	สถานะ (state)	pill `radius 999px`	Approved, Pending, Rejected
Tag	หมวดหมู่ (category)	เหลี่ยม `radius 4px`	B.Grimm Power, Energy, Draft
Chip	หมวด + interaction	pill + แตะได้	ลบ ✕, filter เลือก

Token ครบชุดอยู่ใน bgrimm.tokens.json → component.badge / component.tag — อัปเดตตรงนั้นจุดเดียวแล้ว import ไปใช้ (ดู Token Architecture)

Badges (Status Badges)​

สีทั้งชุด​

กติกา​

Tags​

Solid​

Outlined​

Chips​

แยก badge / tag / chip ให้ถูก​