Quick Props
Edit instantly, preview live
children
stringActions
Button
Primary action trigger for critical and secondary flows.
Import Path
@/src/components/core/Button
Variants
Button.tsx
import { Button } from "@/src/components/core/Button"
<Button variant="primary" size="md" loading={false} disabled={false}>
Book a Session
</Button>Docs Source
Local platform docs
Installation & Quick Start
Team-aligned setup template for install, import path, and first usage.
Installation requirements
Add base component
Install required dependency
cli
npx shadcn@latest add button
cli
npm install @base-ui/react
Visual Requirements
Validate these patterns directly in the live component preview before release.
Button With Icon
Keep icon + label spacing consistent for supportive CTAs.
Requirement: Use leftIcon/rightIcon according to reading direction.Loading State
Show loading in-place during submission and payment actions.
Requirement: loading={true}Action Group
For peer actions, keep buttons aligned in one row with stable spacing.
Requirement: Group layout with consistent gapButton State & Variant Matrix
Review the important variants and states for this component on mobile and desktop before release.
primary variant
children="Book a Session" variant="primary"The primary variant should stay readable across mobile and desktop.
secondary variant
children="Explore Tools" variant="secondary"The secondary variant should stay readable across mobile and desktop.
ai variant
children="Run AI Analysis" variant="ai" iconPlacement="start"The ai variant should stay readable across mobile and desktop.
Loading
loading={true}Loading should be visible at the component level.
Disabled
disabled={true}Disabled state should be muted while remaining legible.
Hero primary CTA
Use for the highest-value action in the first viewport.
Product Documentation Template
This structure should stay consistent across components and products so teams and agents ship with the same quality bar.
Pre-release Alignment Checklist
- Usage, accessibility, and installation guidance must be complete and actionable.
- Code samples must be copyable, runnable, and aligned with canonical import paths.
- loading/disabled/error/success states must be documented and testable.
- Output quality must remain stable on desktop, mobile, RTL, and LTR.
Documentation Ownership Contract
- Primary sources: shadcn/ui + local platform docs
- Owner: Design System team
- Always required: every component change updates its docs
Active component: Button
@/src/components/core/Button
Usage
Use one primary action per section to keep decision clarity.
Accessibility
Always provide meaningful text labels and avoid icon-only critical actions.
Do
Reliable product usage patterns
1Use concise, outcome-focused copy on actions.
2Keep destructive actions clearly separated from primary actions.
Don't
Release risks to remove before shipping
1Do not place multiple primary actions in the same visual block.
2Do not use vague labels like 'Submit' when intent can be specific.
Documentation has not been completed for this component yet.