Button
Button is a component component that provides button functionality.
Active
Examples
variant
Different variant options for the Button component.
primary
secondary
ghost
destructive
size
Different size options for the Button component.
sm
md
lg
Installation
npm install @your-design-system/buttonimport { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="flex items-center space-x-2">
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
</div>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children* | string | - | The content to display inside the component. |
onClick | string | - | Function called when the component is clicked. |
disabled | boolean | false | Whether the component is disabled. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
rounded-mdfont-mediumtransition-colorsfocus:outline-nonefocus:ring-2focus:ring-ringfocus:ring-offset-2variant Variants
primary
bg-primarytext-primary-foregroundhover:bg-primary/90secondary
bg-secondarytext-secondary-foregroundhover:bg-secondary/80ghost
bg-transparenttext-primaryhover:bg-primary/10destructive
bg-errortext-whitehover:bg-error/90size Variants
sm
px-2py-1text-smmd
px-3py-2text-smlg
px-4py-2.5text-baseDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: px-2, py-1, px-3, py-2, px-4, py-2.5. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page