Section 01
Components
Button
Nút bấm. Dựng từ contract Button/Main, gồm 200 variant, properties Size × Level × State.
Color, spacing và radius trong button.css đều sinh từ đặc tả component trong file thiết kế, không có giá trị nào gõ tay.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
API
Props
| Property | Values | Default | Description |
|---|---|---|---|
label | text | Button | Chữ trên nút |
size | xlarge · large · medium · small · xsmall | medium | Size property của contract, 5 values |
level | primary · accent · secondary · tertiary · danger · danger-subtle · positive · positive-subtle | primary | Level property của contract, 8 values |
leadingIcon | 26 icon names, see Iconography | Icon đặt trước chữ | |
trailingIcon | 26 icon names, see Iconography | Icon đặt sau chữ | |
disabled | boolean | false | |
state | default · hover · pressed · focused · disabled | default | Ép trạng thái khi chụp tài liệu. Ứng dụng thật để trống, CSS tự xử lý :hover / :active / :focus-visible. |
Section 02
Levels (8)
Level là vai trò của nút, không phải màu. Đổi Emphasis trên Mode bar thì Primary và Accent đổi màu cho nhau.
Level
primary
accent
secondary
tertiary
danger
danger-subtle
positive
positive-subtle
Section 03
Sizes (5)
Size
xlarge
large
medium
small
xsmall
Đổi Density sang compact thì chiều cao nút đổi theo, vì Size bind vào token component-size.
Section 04
Level × State
Ở đây, trạng thái được ép bằng data-state để xem cả lưới cùng lúc. Trong ứng dụng thật, CSS tự bắt :hover / :active / :focus-visible / :disabled.
defaulthoverpressedfocuseddisabledprimaryaccentsecondarytertiarydangerdanger-subtlepositivepositive-subtle
Lưới đặt trên Surface, giống vị trí của nút trong ứng dụng thật. Nếu đặt thẳng lên canvas, nút Tertiary sẽ sai màu ở Dark mode. Story kế bên giải thích lý do.
Focused trông giống Default là đúng contract. Hai trạng thái dùng chung token nền và chỉ khác nhau ở focus ring (outline).
Section 05
Tertiary on Backgrounds
Background/Hover và Background/Pressed của Tertiary dùng cặp màu alpha của họ Neutral/Flat (alias Neutral-Alpha/2 và /3). Riêng Background/Default lại là màu solid. Màu alpha phủ lên nền cha, màu solid thì không. Vì thế, bước default → hover chỉ đúng khi nền cha trùng màu Default.
Đổi Color scheme sang dark rồi rê chuột vào ba nút bên dưới.
One button, three backgrounds
surface
−7.8 / +8.0
canvas
dark: +0.3
popover
dark: +18.6
Measurements
bước default → hoverLightDarktrên surface−7.8+8.0trên canvas−15.6+0.3trên popover−7.8+18.6—Button/Flat, mọi nền−7.6…−7.8+8.0…+8.3
Mức chênh giữa default và hover, đo trên từng nền.
Why
Background/Default là màu solid, còn Hover và Pressed là màu alpha. Màu alpha phủ lên nền cha, màu solid thì không. Vì thế, độ tương phản giữa hai trạng thái thay đổi theo nền phía sau.
File Figma quy định như vậy. Bản React của design system đọc cùng token nên cũng hiển thị giống hệt.
Section 06
With Icons
Leading / Trailing / Both / Icon only
leading
trailing
both
icon only
Ô chọn icon chỉ liệt kê nhóm icon hay dùng. Cả 1.826 icon đều dùng được: tra tên ở Foundations / Iconography rồi truyền tên đầy đủ.
Section 07
Size × Level (40)
primaryaccentsecondarytertiarydangerdanger-subtlepositivepositive-subtlexlargelargemediumsmallxsmall