Design System Builder

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/button
import { 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

PropTypeDefaultDescription
children*string-

The content to display inside the component.

onClickstring-

Function called when the component is clicked.

disabledbooleanfalse

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

variant Variants

primary

bg-primarytext-primary-foregroundhover:bg-primary/90

secondary

bg-secondarytext-secondary-foregroundhover:bg-secondary/80

ghost

bg-transparenttext-primaryhover:bg-primary/10

destructive

bg-errortext-whitehover:bg-error/90

size Variants

sm

px-2py-1text-sm

md

px-3py-2text-sm

lg

px-4py-2.5text-base

Design System Compliance

This component is validated against atomic design principles and foundation token usage.