mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- 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.
81 lines
2.5 KiB
Markdown
81 lines
2.5 KiB
Markdown
---
|
|
title: Button
|
|
description: Button component for triggering actions or submitting forms
|
|
sidebar: 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
|
|
|
|
<PropsTable :props="[
|
|
{ name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: 'Visual style variant' },
|
|
{ name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: 'Button size' },
|
|
{ name: 'asChild', type: 'boolean', required: false, default: 'false', description: 'Whether to merge props with child element (for Radix UI composition)' },
|
|
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the button is disabled' },
|
|
{ name: 'onClick', type: '() => void', required: false, default: '-', description: 'Click event callback' },
|
|
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
|
|
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Button content' }
|
|
]" />
|
|
|
|
## 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 |
|
|
|
|
## Related Components
|
|
|
|
- [Input](/components/ui/input)
|
|
- [Select](/components/ui/select)
|
|
- [Dialog](/components/ui/dialog)
|