Button Group Placement Analysis

🔬 Phân tích UX: Vị trí cụm nút (Action Group Placement)

Ngày: 2026-03-12 | Phạm vi: Web + App | Mức độ: 🔴 Critical (UX consistency)

1. Vấn đề phát hiện

1.1 Web: Cụm nút lúc bên trái, lúc bên phải

Nguyên nhân gốc: Có 3 CSS class khác nhau cho footer/action group, mỗi class dùng alignment khác nhau:

⚠️ .card-footer KHÔNG có justify-content → mặc định flex-start (trái), trong khi toàn bộ overlay components (dialog, modal, drawer) đều canh phải (flex-end).

Kết quả: User nhìn Card thấy nút bên trái, mở Dialog/Modal thấy nút bên phải → mất consistency, vi phạm NNG H4 (Consistency & Standards).

1.2 App: Chưa có layout spec cho cụm nút

Hiện tại, DS chỉ có:

• Button pairing rules (§4.5) — variant ghép đôi (primary ↔ outline)
• Button size rules (BS-1 → BS-5) — quy tắc chọn size
• ❌ KHÔNG CÓ quy tắc về vị trí / alignment của cụm nút
• ❌ KHÔNG CÓ utility class .action-group hay .action-bar cho app context

2. Phân tích hệ thống tham chiếu

2.1 So sánh Web vs App

2.2 Reference Systems

Material Design 3:

• Web Dialog/AlertDialog → trailing (phải)
• Mobile Bottom Sheet → center, full-width buttons
• Card actions → thường trailing

Apple HIG:

• Alert (iOS) → center (stacked full-width)
• Sheet (macOS) → trailing
• Navigation Bar → leading/trailing slots

shadcn/ui:

• Dialog / AlertDialog → flex-end (phải)
• Card → flex (no justify — left default)

Banking apps (VCB, Momo, ZaloPay): CTA luôn center full-width.

3. Đề xuất: Hệ thống Action Group Placement

3.1 Nguyên tắc cốt lõi — Platform-Aware Alignment

Platform	Quy tắc alignment	Lý do
Web (desktop)	▶ Trailing (flex-end)	Z-pattern scan, Fitts's Law, MD3/shadcn consensus
App (mobile)	▸ Center (full-width, centered)	Thumb zone, visual balance, iOS/Android native pattern

Đây là sự khác biệt có chủ đích dựa trên platform context, không phải inconsistency.

3.2 Bảng quy tắc — AG Rules

3.3 CSS Implementation

/* ─── Action Group — Web: trailing, responsive stack ─── */
.action-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* Mobile: center, full-width stacked */
@media (max-width: 768px) {
    .action-group--responsive {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .action-group--responsive > .btn {
        width: 100%;
        justify-content: center;
    }
}

3.4 Fix List

3.5 Sơ đồ visual

WEB — Overlay/Card: Trailing (flex-end)
┌────────────────────────────────┐
│  Title                    [✕]  │
│  Description text...           │
│           [Cancel] [Confirm]   │ ← flex-end ✅
└────────────────────────────────┘

APP — Mobile: Center, stacked full-width
┌────────────────────────────────┐
│  Title                         │
│  Content...                    │
│  ┌──────────────────────────┐  │
│  │       Xác nhận           │  │ ← full-width center ✅
│  └──────────────────────────┘  │
│  ┌──────────────────────────┐  │
│  │         Huỷ              │  │ ← full-width center ✅
│  └──────────────────────────┘  │
└────────────────────────────────┘