Button

Template page cho usage guide của Button. Sau này mỗi component sẽ có một page riêng theo cùng bố cục này.

1. Import

Import trực tiếp từ source path của component.

import { Button } from "@/design-system/components/ui/button"

2. Props

Props quan trọng nên phản ánh đúng khả năng chính của component hiện tại.

Prop	Type	Default
variant	"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"	"default"
size	"xs" \| "sm" \| "default" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"
className	string	--
disabled	boolean	false
loading	boolean	false
aria-invalid	boolean	false
children	ReactNode	--

3. Sizes

Available sizes for the Button component.

4. Usages

Mỗi cách dùng quan trọng nên có tab riêng, để preview và code bám đúng use case thay vì dùng một snippet chung.

import { Button } from "@/design-system/components/ui/button";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button variant="default">Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}