Files
Claude-Code-Workflow/docs/components/ui/button.md
catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese
- 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.
2026-03-01 10:52:46 +08:00

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 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