- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
2.5 KiB
title, description, sidebar
| title | description | sidebar |
|---|---|---|
| Button | Button component for triggering actions or submitting forms | auto |
Button
Overview
The Button component is one of the most commonly used interactive elements, used to trigger actions, submit forms, or navigate to other pages.
Live Demo
:::demo button-variants Shows all visual variants of the button component :::
Props
Variants
Default
Default buttons are used for primary actions.
Destructive
Destructive buttons are used for irreversible actions like delete or remove.
Outline
Outline buttons are used for secondary actions with a lighter visual weight.
Secondary
Secondary buttons are used for auxiliary actions.
Ghost
Ghost buttons have no border and the lightest visual weight.
Link
Link buttons look like links but have button interaction behavior.
Gradient
Gradient buttons use the brand gradient with a glow effect on hover.
Gradient Primary
Gradient Primary buttons use the primary theme gradient with an enhanced glow effect on hover.
Usage Scenarios
| Scenario | Recommended Variant |
|---|---|
| Primary actions (submit, save) | default, gradientPrimary |
| Dangerous actions (delete, remove) | destructive |
| Secondary actions | outline, secondary |
| Cancel actions | ghost, outline |
| Navigation links | link |
| Promotional/Featured CTAs | gradient |