mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-05 16:13:08 +08:00
f389e3e6dd
Backend:
- Fix readLegacyFiles to handle { name, prefix }[] role format
- Add roles backfill in getEffectiveTeamMeta when meta.json exists
- Ensure pipeline_stages and roles flow correctly to API response
Team Skills:
- Add pipeline metadata initialization to all 16 team skill coordinator roles
- Each skill now reports pipeline_stages and roles to meta.json at session init
Documentation:
- Update command references and component documentation
- Add numerical-analysis-workflow skill spec
- Sync zh/en translations for commands and components
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
|