Tuỳ biến bằng slot & composition

import { ArrowRight16Regular, Share20Regular } from "@fluentui/react-icons";
import { Button, Popover, PopoverSurface, PopoverTrigger } from "@/components/ui";

{/* Button render thành <a> nhưng giữ nguyên style, ref, sự kiện */}
<Button asChild appearance="primary">
  <a href="#/concepts/theming">
    Đọc về Theming
    <ArrowRight16Regular className="rtl:-scale-x-100" />
  </a>
</Button>

{/* Trigger của Radix gộp hành vi mở / aria-* vào Button của bạn */}
<Popover>
  <PopoverTrigger asChild>
    <Button icon={<Share20Regular />}>Chia sẻ</Button>
  </PopoverTrigger>
  <PopoverSurface>Liên kết đã được sao chép.</PopoverSurface>
</Popover>

<Button icon={<Add20Regular />}>Tạo mới</Button>
<Button icon={<ArrowRight16Regular className="rtl:-scale-x-100" />} iconPosition="after">Tiếp tục</Button>
<Button appearance="subtle" icon={<MoreHorizontal20Regular />} aria-label="Thêm" />

<Input
  aria-label="Tìm tệp"
  placeholder="Tìm tệp"
  contentBefore={<Search20Regular />}
  contentAfter={<Kbd>/</Kbd>}
  rootClassName="w-64"
/>

<Badge icon={<Document20Regular />}>12</Badge>

<Menu>
  <MenuTrigger asChild>
    <Button>Thao tác</Button>
  </MenuTrigger>
  <MenuPopover>
    <MenuItem icon={<Edit20Regular />} secondaryContent="Ctrl+E">Sửa</MenuItem>
    <MenuItem icon={<Copy20Regular />} secondaryContent="Ctrl+D">Nhân bản</MenuItem>
    <MenuDivider />
    <MenuItem icon={<Delete20Regular />}>Xoá</MenuItem>
  </MenuPopover>
</Menu>

<List className="w-full max-w-md">
  <ListItem
    media={<Avatar name="Phạm Thu Hà" color="colorful" />}
    title="Phạm Thu Hà"
    description="Đã chỉnh sửa Kế hoạch quý 3"
    actions={<Button size="small" appearance="subtle" icon={<MoreHorizontal20Regular />} aria-label="Thêm thao tác" />}
  />
</List>

<Dropdown placeholder="Chọn thư mục" aria-label="Thư mục">
  <DropdownOption value="docs" media={<Folder20Regular />}>Tài liệu</DropdownOption>
  <DropdownOption value="design" media={<Folder20Regular />}>Thiết kế</DropdownOption>
</Dropdown>

import { Avatar, Badge, Button, Card, CardContent, CardFooter, CardHeader } from "@/components/ui";

<Card className="w-full max-w-sm">
  <CardHeader
    image={<Avatar name="Nhóm Sakura" color="brand" />}
    header="Nhóm Sakura"
    description="Cập nhật 5 phút trước"
    action={<Button appearance="subtle" icon={<MoreHorizontal20Regular />} aria-label="Thêm thao tác" />}
  />
  <CardContent>Bản phác thảo trang chủ mới đã sẵn sàng để góp ý.</CardContent>
  {/* Chèn bất kỳ phần tử nào giữa các phần — thứ tự do bạn quyết định */}
  <div className="flex gap-1">
    <Badge appearance="tint" color="brand">Thiết kế</Badge>
    <Badge appearance="tint" color="informative">Bản nháp</Badge>
  </div>
  <CardFooter>
    <Button appearance="primary">Mở</Button>
    <Button>Bỏ qua</Button>
  </CardFooter>
</Card>

{/* 1. Element: Field clone và gắn id, aria-describedby, aria-invalid, required, disabled */}
<Field label="Tên dự án" hint="Hiển thị trên thanh tiêu đề." required>
  <Input placeholder="Yugen Docs" />
</Field>

{/* 2. Render-prop: tự quyết định props đi vào đâu */}
<Field label="Quyền truy cập" hint="Có thể đổi sau trong Cài đặt.">
  {(props) => (
    <RadioGroup {...props} defaultValue="team" layout="horizontal">
      <Radio value="private" label="Riêng tư" />
      <Radio value="team" label="Trong nhóm" />
    </RadioGroup>
  )}
</Field>

<Input rootClassName="w-72" className="bg-background-2" placeholder="Khung nền xám, khối rộng 288px" />
<Slider rootClassName="max-w-xs" label="Âm lượng" defaultValue={[40]} />
<Select className="w-48" selectClassName="font-semibold">…</Select>
<Dropdown className="w-56" listboxClassName="max-h-60">…</Dropdown>