Button

Buttons are one of the most-used components. Keep them accessible and consistent.

Props (common)

• children: ReactNode — button content
• variant: 'primary' | 'secondary' | 'ghost'
• size: 'sm' | 'md' | 'lg'
• disabled: boolean

Example usage

import { Button } from "components/ui/button";

export default function Demo() {
  return (
    <div className="space-x-2">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}

Notes

• Ensure buttons have discernible focus styles and aria-labels when icon-only.
• Use semantic <button> for actions and <a> for navigation when appropriate.