Buttons & Cards

Buttons

Variant	พื้นหลัง	ตัวอักษร	เมื่อไหร่
Primary	`#FF6727`	ขาว หนา ≥14px	Call-to-action หลักของหน้า — มีได้จุดเดียวต่อ 1 หน้าจอที่มองเห็นพร้อมกัน
Secondary	โปร่งใส + border `#FF6727`	`#C43400`	Action รอง เช่น "ดูรายละเอียด"
Ghost	โปร่งใส ไม่มี border	`#63666F`	Action ที่เบาที่สุด เช่น "ยกเลิก"

ปุ่มจริง · ชี้เมาส์และกด Tab เพื่อดู hover/focus

Variants

Sizes

ลำดับชั้นหนึ่งหน้าจอมีปุ่ม primary ได้จุดเดียว — ที่เหลือลดเป็น secondary หรือ ghost เสมอ

ทุกปุ่มด้านบนใช้ค่าจริงจาก token: radius.md 6px, padding space.2 space.4, ตัวอักษร 14px หนา 700

Variant เพิ่มเติม

Variant	ใช้เมื่อ	ข้อกำหนด
Danger	Action ที่ทำลายข้อมูล (ลบถาวร, ยกเลิกสัญญา)	พื้น `#D64541` (`button.danger.default`) — ต้องมี modal ยืนยันเสมอ
Link/Text	Action ระดับข้อความในเนื้อหา	ไม่มีพื้นหลัง มีขีดเส้นใต้ ให้แยกออกจากลิงก์ปกติได้
Icon only	แถบเครื่องมือ, ปิด dialog	ต้องมี `aria-label` และเป้าแตะ ≥ 40×40px เสมอ
Segmented group	สลับมุมมองที่เลือกได้ทีละอัน	ใช้ border เส้นเดียวร่วมกัน ตัวที่เลือกพื้น `#FFF1EA`
Full width	ปุ่มหลักในฟอร์มบนมือถือ / ใน card แคบ	ใช้ได้เฉพาะเมื่อมี action เดียวจริงๆ

Variant เพิ่มเติม · กดและชี้เมาส์ได้ทุกตัว

Dangerปุ่มทำลายข้อมูลใช้ #D64541 (button.danger = status.error.600) — ตาม HTML และคู่กับปุ่ม ghost เสมอเพื่อให้ถอยได้ง่าย

Text / Link

Icon onlyทุกปุ่มไอคอนต้องมี aria-label — screen reader อ่านสัญลักษณ์ไม่ออก

Segmented

มีตัวนับ

Full width

กำลังทำงานปุ่มที่กดแล้วต้อง disabled ทันทีพร้อมโชว์ spinner — กันผู้ใช้กดซ้ำ (ดู States & Feedback)

ทุก variant ใช้ radius 8px · padding 8/16px · ตัวหนา 700 เท่ากันหมด — ต่างกันแค่ระดับความเด่นของพื้นหลัง

.btn-primary {
  background: var(--bgrimm-orange);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px; /* token: radius.md */
  padding: 8px 16px;  /* token: space.2 space.4 */
}
.btn-primary:hover { background: var(--bgrimm-orange-400); } /* #FF8550 */
.btn-primary:active { background: var(--bgrimm-orange-800); } /* #C43400 */
.btn-primary:disabled { background: var(--bgrimm-orange-200); cursor: not-allowed; } /* #FFB088 */

hover สว่างขึ้น · pressed เข้มขึ้น

ตาม token v1.0.0 ปุ่ม primary มีสถานะ 3 ระดับ: default #FF6727 → hover #FF8550 (สว่างขึ้นเพื่อสื่อ feedback) → pressed #C43400 (เข้มขึ้นตอนกด) — ตัวอักษรขาวบน #FF6727 ผ่านเกณฑ์ WCAG large-text 3:1 เมื่อตัวหนา ≥14px ห้ามลบ pattern นี้ออก (ดู Accessibility & Contrast)

States

State	การเปลี่ยนแปลง
Default	ตามตารางด้านบน
Hover	พื้นหลังเข้มขึ้นหนึ่งระดับ (`primary` → `primary-hover` token)
Active/Pressed	เข้มขึ้นอีกเล็กน้อย + scale 0.98 (ดู Animation Guidelines เรื่อง reduced-motion)
Disabled	ใช้ `--bgrimm-muted` (`#989AA5`) เป็นพื้นหลัง, opacity 0.6, `cursor: not-allowed`
Focus	outline 2px `#C43400` offset 2px (ตาม `custom.css` ปัจจุบัน)

ทั้ง 5 state พร้อมกัน · ตรึงไว้ให้เทียบ

Primary

Secondary

Ghost

Focus ring ใช้ #C43400 offset 2px ไม่ใช่ outline ฟ้า default ของเบราว์เซอร์ — และห้ามลบ outline ทิ้งโดยไม่ใส่ตัวแทน

Cards

การ์ดจริง · ใบขวาคลิกได้ ลองชี้เมาส์เพื่อดู elevation

โรงไฟฟ้าพลังงานแสงอาทิตย์

การ์ดข้อมูลปกติที่ไม่ได้คลิกทั้งใบ — เงาอยู่ที่ shadow.sm คงที่ ไม่ขยับตอน hover

การ์ดที่คลิกได้ทั้งใบ

ตอน hover ยกขึ้นเป็น shadow.md เท่านั้น — พื้นหลังยังขาวเหมือนเดิม ไม่เปลี่ยนสี

โครงของการ์ด: media (ถ้ามี) → heading → body สั้น ๆ → action (ถ้ามี) · padding 24px เท่ากันทุกด้าน

ชนิดของการ์ดที่ใช้บ่อย

ชนิด	ใช้เมื่อ	หมายเหตุ
Stat card	โชว์ตัวเลขเดียวที่สำคัญ	ตัวเลขใช้ `#3E4048` (grey.800) ไม่ใช่สีส้ม (ดู Dashboard Patterns)
Media card (full-bleed)	มีภาพเป็นพระเอก	ภาพชนขอบ ไม่มี padding รอบภาพ มุมบนโค้งตามการ์ด
Horizontal card	รายการยาวที่มี thumbnail	ภาพ 68×68px ซ้าย เนื้อหาขวา
List card	จัดกลุ่มรายการสั้นๆ	เส้นคั่น `#EBECF0` บาง ไม่ใส่เงาให้แต่ละแถว
Flat card	การ์ดใน list ยาวมาก	`shadow.none` — ใช้ border อย่างเดียว กันหน้าเว็บดูฟุ้ง

การ์ดทั้ง 5 ชนิด · เรนเดอร์จริงด้วย token ชุดเดียวกัน

Stat card

กำลังผลิตติดตั้งรวม

3,036 MW

▲ +4.2% จากปีก่อน

Media card

โครงการพลังงานลม

ภาพชนขอบทั้งสามด้าน — padding อยู่ที่บล็อกข้อความเท่านั้น

Horizontal card

สำหรับรายการยาวที่มี thumbnail กำกับทุกแถว

List card

โรงไฟฟ้าอมตะเดินเครื่อง
โครงการโซลาร์ ระยองก่อสร้าง
โครงการลม นครราชสีมาศึกษา

Flat card

ไม่มีเงาเลย

ใช้ใน list ที่มีการ์ดหลายสิบใบ — ถ้าใส่เงาทุกใบหน้าจะดูฟุ้งและหนักทันที

ทุกชนิดใช้ border #D9DAE4 · radius 16px เท่ากัน — ต่างกันแค่โครงข้างใน ไม่ใช่ต่างที่สไตล์ของกรอบ

Hover จริงทั้ง 3 แบบ

ชี้เมาส์ที่การ์ดทั้งสามใบ · เทียบความรู้สึกโดยตรง

ถูก — ยก 2px, 150msเงาขึ้นจาก shadow.sm เป็น shadow.md พื้นหลังคงเดิม

ไม่แนะนำ — ไม่มี transitionเงาเปลี่ยนแบบกระตุก ไม่มี feedback ว่าเกิดอะไรขึ้น

ผิด — ยกสูง เอียง 900msดูเหมือนโฆษณา ขัดกับ vibe boardroom-ready ทันที

Hover ที่ถูกต้องคือ "รู้สึกได้แต่ไม่ตะโกน" — รายละเอียด duration/easing ดูที่ Animation Guidelines

เงาและมุมโค้ง · ถูก vs ผิด

ถูก — radius 16px + เงาเบา

Minimal ตามแบรนด์

เงาแค่พอบอกว่าลอยขึ้นจากพื้น

shadow.smมุม 16px ตาม radius.2xl และเงา 0 1px 2px — เข้ากับ vibe boardroom-ready

ผิด — เงาหนา / มุมเหลี่ยม

เงาเกินระดับ 3

ดูลอยเหมือน pop-up โฆษณา

ห้ามเกิน shadow.xlเงาฟุ้ง ๆ และมุมเหลี่ยม 0px ทำให้การ์ดหลุดจากระบบ ดูเป็นเทมเพลตสำเร็จรูป

พื้นหลัง #FFFFFF, border 1px solid grey shade 1 (#D9DAE4), radius 16px (token: radius.lg)
เงาเบามาก (shadow.sm) — ห้ามใช้เงาหนักจนดูลอย ขัดกับ vibe minimal
Padding ภายในสม่ำเสมอ 24px (token: space.6) ทุกด้าน
Hover (ถ้า card คลิกได้): ยก shadow ขึ้นหนึ่งระดับ ไม่เปลี่ยนสีพื้นหลัง

รายละเอียด token ที่ใช้จริงดูที่ Design Tokens → Spacing, Radius & Elevation และตัวอย่างโค้ดต่อ framework ที่ Framework Implementation

Buttons​

Variant เพิ่มเติม​

States​

Cards​

ชนิดของการ์ดที่ใช้บ่อย​

Hover จริงทั้ง 3 แบบ​