Button
Trigger an action or event. Supports multiple variants, sizes, and states.
Khi nào sử dụng
Hành động chính
Các thao tác chính như gửi, xác nhận hoặc CTA. Dùng một button mỗi section.
Hành động phụ
Các thao tác hỗ trợ như hủy, quay lại hoặc đóng.
Hành động nguy hiểm
Các thao tác không thể hoàn tác như xóa hoặc loại bỏ.
Hướng dẫn
Do
- Dùng một Button chính mỗi section hoặc view
- Kết hợp icon với text để rõ nghĩa hơn
- Hiện trạng thái loading cho thao tác bất đồng bộ
Don't
- Đặt hai Button chính cạnh nhau
- Dùng biến thể Danger cho hành động không nguy hiểm
- Disable mà không giải thích — hãy dùng tooltip
Variants
Sizes
States
Full Width
API
| Prop | Type | Default |
|---|---|---|
| type | 'primary' | 'default' | 'text' | 'link' | 'default' |
| size | 'small' | 'middle' | 'large' | 'middle' |
| danger | boolean | false |
| loading | boolean | false |
| disabled | boolean | false |
| block | boolean | false |
| icon | ReactNode | — |
| onClick | () => void | — |