Button หลายหน้าตาในที่เดียว — variants ด้วย CVA

# เวอร์ชันจริงใน node_modules ของโปรเจกต์ที่ใช้ตรวจ
next                      16.3.5
react                     19.2.8
typescript                5.9.3
tailwindcss               4.3.3
class-variance-authority  0.7.1
@base-ui/react            1.8.0
shadcn                    4.21.0
node                      v24.14.0

# npx next build
▲ Next.js 16.3.5 (Turbopack)
✓ Compiled successfully in 5.1s
  Running TypeScript ...
  Finished TypeScript in 1052ms ...
✓ Generating static pages using 6 workers (5/5) in 331ms

1 · วิเคราะห์ปุ่มก่อนเขียนโค้ด — ปุ่มหนึ่งปุ่มมีกี่ "แกน"

สไลด์หน้า 28 เป็นหน้า Component Library ของ Wongnok UI · หัวข้อ Button เขียนกำกับว่า "6 variants · 3 sizes" และมีโค้ดตัวอย่างการใช้งานแปะไว้ใต้ภาพ:

// สไลด์หน้า 28–29 (กล่องโค้ดใต้ภาพปุ่ม)
<Button>Browse Recipes</Button>
<Button variant="outline">Share Your Recipe</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="destructive-outline">Delete recipe</Button>
<Button variant="accent" size="lg">Sign in</Button>
<Button disabled>Disabled</Button>
<Button loading>Saving…</Button>

หน้า 29 ไล่ชื่อ variant ในแบบนั้นไว้ (default · outlined · ghost · destructive-outline · accent) · แต่พอถึงหน้า 30 สไลด์หัวข้อ "CRAFT VERSION" — แบบที่เราจะสร้างเองในคอร์สนี้ — แยกปุ่มออกเป็น 4 แกนที่เป็นอิสระต่อกัน:

ทำไมต้องแยกเป็นแกน? ลองนับดู: 2 × 4 × 3 = 24 หน้าตา (ยังไม่รวม state)
ถ้าตั้งชื่อ variant เป็นก้อนเดียวแบบหน้า 28 (destructive-outline) ทุกครั้งที่อยากได้ปุ่มแบบใหม่ ต้องคิดชื่อใหม่ · อยากได้ "ขอบส้ม" ก็ต้องเพิ่ม accent-outline อีกชื่อ · แต่ถ้าแยกแกน variant="outlined" color="accent" ได้มาฟรีโดยไม่ต้องเพิ่มอะไร

2 · ปัญหา — เขียน className ด้วย ternary ซ้อนกัน

ถ้ายังไม่รู้จักเครื่องมืออะไรเลย คนส่วนใหญ่จะเขียนฟังก์ชันคืน className แบบนี้ (ต่อยอดจาก getVariantStyles ใน บทเรียน 71) · class ที่ใช้เป็นชื่อ token จาก บทเรียน 81 (bg-primary, bg-accent …) ส่วน error ผมผูกกับ token destructive และ gray ผูกกับ muted ที่ shadcn สร้างไว้ให้:

// components/Bases/naive-button-class.ts — วิธีเก่าที่แย่ (tsc ผ่าน)
type Variant = "contained" | "outlined";
type Color = "primary" | "accent" | "error" | "gray";
type Size = "sm" | "md" | "lg";

export function getButtonClass(
  variant: Variant = "contained",
  color: Color = "primary",
  size: Size = "md",
  disabled = false,
) {
  return (
    "inline-flex items-center justify-center rounded-md font-medium " +
    (size === "sm" ? "h-8.5 px-3 text-sm" : size === "lg" ? "h-12 px-6 text-base" : "h-10 px-4 text-sm") +
    " " +
    (variant === "contained"
      ? color === "primary"
        ? "bg-primary text-primary-foreground hover:bg-primary/90"
        : color === "accent"
          ? "bg-accent text-accent-foreground hover:bg-accent/90"
          : color === "error"
            ? "bg-destructive text-white hover:bg-destructive/90"
            : "bg-muted text-foreground hover:bg-muted/80"
      : "border-2 bg-transparent" +
        (color === "primary"
          ? "border-primary text-primary"
          : color === "accent"
            ? "border-accent text-accent"
            : color === "error"
              ? "border-destructive text-destructive"
              : "border-border text-foreground")) +
    (disabled ? " opacity-50 pointer-events-none" : "")
  );
}

แค่ 4 แกนก็ซ้อนกันลึก 4 ชั้นแล้ว · อ่านแล้วตอบไม่ได้ทันทีว่า "ปุ่มขอบแดงขนาดเล็กได้ class อะไร" ต้องไล่วงเล็บทีละชั้น · และที่แย่กว่าความรกคือมันพังได้โดยไม่มีใครฟ้อง

import { getButtonClass } from "../components/Bases/naive-button-class.ts";
console.log(getButtonClass());
console.log(getButtonClass("outlined", "error", "sm"));

inline-flex items-center justify-center rounded-md font-medium h-10 px-4 text-sm bg-primary text-primary-foreground hover:bg-primary/90
inline-flex items-center justify-center rounded-md font-medium h-8.5 px-3 text-sm border-2 bg-transparentborder-destructive text-destructive

3 · cva() — เมนูแบบติ๊กช่อง

สไลด์หน้า 31 แนะนำ Class Variance Authority (CVA) ว่าเป็นไลบรารีที่ "จัดการ variant ของ UI แบบ type-safe โดยที่คุณไม่ต้องต่อชื่อ class เอง" · ไม่ต้องติดตั้งเพิ่ม เพราะ shadcn init ใส่ class-variance-authority ลง package.json ไว้ให้แล้ว

cva() รับของสองก้อน:

1. class ฐาน — ของที่ทุกปุ่มต้องมีเสมอ ไม่ว่าจะเลือกอะไร
2. config — มีสามช่องหลัก: variants (เมนูแต่ละแกน) · compoundVariants (กฎพิเศษเมื่อหลายแกนตรงพร้อมกัน) · defaultVariants (ค่าที่ใช้เมื่อไม่ได้ส่งมา)

แล้วมันคืนฟังก์ชันกลับมา — เรียกฟังก์ชันนั้นพร้อมตัวเลือก ได้ string class ออกมา · นี่คือไฟล์เดียวกับหัวข้อ 2 เขียนใหม่ด้วย cva:

// components/Bases/button-variants.ts
import { cva, type VariantProps } from "class-variance-authority";

export const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        contained: "",
        outlined: "border-2 bg-transparent",
      },
      color: {
        primary: "",
        accent: "",
        error: "",
        gray: "",
      },
      size: {
        sm: "h-8.5 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
    },
    compoundVariants: [
      { variant: "contained", color: "primary", className: "bg-primary text-primary-foreground hover:bg-primary/90" },
      { variant: "contained", color: "accent",  className: "bg-accent text-accent-foreground hover:bg-accent/90" },
      { variant: "contained", color: "error",   className: "bg-destructive text-white hover:bg-destructive/90" },
      { variant: "contained", color: "gray",    className: "bg-muted text-foreground hover:bg-muted/80" },
      { variant: "outlined",  color: "primary", className: "border-primary text-primary hover:bg-primary/10" },
      { variant: "outlined",  color: "accent",  className: "border-accent text-accent hover:bg-accent/10" },
      { variant: "outlined",  color: "error",   className: "border-destructive text-destructive hover:bg-destructive/10" },
      { variant: "outlined",  color: "gray",    className: "border-border text-foreground hover:bg-muted" },
    ],
    defaultVariants: {
      variant: "contained",
      color: "primary",
      size: "md",
    },
  },
);

export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

สามจุดที่ควรสังเกต:

• ค่าใน color เป็น string ว่างทั้งหมด — เพราะสีอย่างเดียวไม่พอจะรู้ว่าต้องใช้ class อะไร (ทึบใช้ bg-primary · ขอบใช้ border-primary) · ต้องรู้ทั้ง variant และ color พร้อมกัน → จึงไปอยู่ใน compoundVariants · ที่ต้องประกาศช่องว่างไว้ก็เพื่อให้ cva (และ TypeScript) รู้ว่ามีค่า primary/accent/… อยู่ในเมนู
• ขนาดใช้ h-8.5 / h-10 / h-12 ให้ตรงป้าย 34 / 40 / 48px ในสไลด์หน้า 30 · Tailwind v4 คำนวณจาก --spacing คูณตัวเลข · ผมเปิดไฟล์ CSS ที่ build ออกมาจริงแล้วเจอ .h-8\.5{height:calc(var(--spacing) * 8.5)} และ --spacing:.25rem → 0.25rem × 8.5 = 2.125rem = 34px (เมื่อ font-size ของ root เป็น 16px) — ไม่ต้องใช้ h-[34px]
• disabled ไม่ต้องมีแกนของตัวเอง — class ฐานมี disabled:opacity-50 disabled:pointer-events-none อยู่แล้ว · ใส่ attribute disabled บนแท็กเมื่อไหร่ Tailwind จางให้เอง (ต่างจาก ternary ในหัวข้อ 2 ที่ต้องส่ง boolean มาต่อ string เอง)

ผลรันจริง — เรียก buttonVariants ตัวข้างบนใน node:

buttonVariants()
  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-10 px-4 text-sm bg-primary text-primary-foreground hover:bg-primary/90"
buttonVariants({ variant: "contained", color: "accent" })
  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-10 px-4 text-sm bg-accent text-accent-foreground hover:bg-accent/90"
buttonVariants({ variant: "outlined" })
  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 border-2 bg-transparent h-10 px-4 text-sm border-primary text-primary hover:bg-primary/10"
buttonVariants({ variant: "outlined", color: "error", size: "sm" })
  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 border-2 bg-transparent h-8.5 px-3 text-sm border-destructive text-destructive hover:bg-destructive/10"

อ่านผลออกมาได้สามเรื่อง:
1. ลำดับคงที่เสมอ: class ฐาน → variant → color → size → compoundVariants ต่อท้ายสุด
2. string ว่างไม่ทิ้งช่องว่างซ้อน — ไม่มี " " สองช่องสักที่ (ผมครอบ JSON.stringify ไว้ดูแล้ว)
3. เคสเดียวกับที่ ternary พังในหัวข้อ 2 (outlined + error + sm) ตอนนี้ได้ bg-transparent h-8.5 … border-destructive แยกคำถูกต้อง

4 · compoundVariants และ defaultVariants — พิสูจน์ว่าต่อท้าย "เมื่อครบเงื่อนไขเท่านั้น"

สไลด์หน้า 32 นิยามไว้ประโยคเดียว: "variants ที่มีผลเมื่อเงื่อนไขของ variant อื่นหลายตัวเป็นจริงพร้อมกัน" และแปะโค้ดไว้ 12 บรรทัด — ถอดมาตามจริงทุกตัวอักษร:

// สไลด์หน้า 32 บรรทัด 1–12
compoundVariants: [
  {
    variant: "contained",
    color: "primary",
    className: "bg-primary text-primary-foreground hover:bg-primary/90",
  },
  {
    variant: "contained",
    color: "accent",
    className: "bg-accent text-accent-foreground hover:bg-accent/90",
  },
],

สไลด์ให้มาแค่ท่อนนี้ (ไม่มีส่วน variants และมีแค่สองกฎ) · เพื่อพิสูจน์พฤติกรรมให้ชัด ผมห่อมันด้วย cva ที่เล็กที่สุด — class ฐานเป็นคำว่า btn คำเดียว · มีแค่แกน variant กับ color · และใช้ compoundVariants แค่สองกฎตามสไลด์เป๊ะ:

const buttonVariants = cva("btn", {
  variants: {
    variant: { contained: "", outlined: "border-2" },
    color: { primary: "", accent: "", error: "", gray: "" },
  },
  compoundVariants: [ /* สองกฎของสไลด์หน้า 32 */ ],
  defaultVariants: { variant: "contained", color: "primary" },
});

buttonVariants({ variant: "contained", color: "primary" })
buttonVariants({ variant: "outlined",  color: "primary" })
buttonVariants({ variant: "contained", color: "error" })
buttonVariants({ color: "accent" })
buttonVariants({ variant: undefined })
buttonVariants({ variant: null })

{ variant: "contained", color: "primary" }   → "btn bg-primary text-primary-foreground hover:bg-primary/90"
{ variant: "outlined",  color: "primary" }   → "btn border-2"
{ variant: "contained", color: "error" }     → "btn"
{ color: "accent" }                          → "btn bg-accent text-accent-foreground hover:bg-accent/90"
{ variant: undefined }                       → "btn bg-primary text-primary-foreground hover:bg-primary/90"
{ variant: null }                            → "btn"

5 · VariantProps — ให้ TypeScript ฟ้องเมื่อส่ง variant ผิด

บรรทัดสุดท้ายของไฟล์ในหัวข้อ 3:

export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

อ่านเป็นภาษาคน: "ไปอ่านเมนูใน buttonVariants แล้วสร้าง type ของ props ให้เอง" · ไม่ต้องเขียน type Variant = "contained" | "outlined" ซ้ำเหมือนหัวข้อ 2 · เพิ่มค่าในเมนูเมื่อไหร่ type เปลี่ยนตามทันที · จากนั้นเอาไปบวกกับ props ของปุ่ม HTML ด้วย & แบบที่เรียนใน บทเรียน 71:

// components/Bases/Button.tsx
import { Loader2Icon } from "lucide-react";
import { cn } from "@/lib/utils";
import { buttonVariants, type ButtonVariantProps } from "./button-variants";

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  ButtonVariantProps & {
    loading?: boolean;
  };

const Button = (props: ButtonProps) => {
  const {
    variant,
    color,
    size,
    loading = false,
    disabled,
    className,
    children,
    ...restProps
  } = props;

  return (
    <button
      className={cn(buttonVariants({ variant, color, size }), className)}
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      {...restProps}
    >
      {loading && <Loader2Icon className="size-4 animate-spin" aria-hidden="true" />}
      {children}
    </button>
  );
};

export default Button;

สังเกตว่า variant · color · size · loading ถูกดึงออกก่อนทุกตัว ไม่ปล่อยให้ตกลงไปใน restProps — กับดักเดียวกับบทเรียน 71 หัวข้อ 6 ที่ของไหลไปโผล่บน DOM

// app/buttons/bad.tsx
import Button from "@/components/Bases/Button";

export function Bad() {
  return (
    <>
      <Button variant="ghost">Cancel</Button>
      <Button color="red">Delete</Button>
      <Button size="xl">Sign in</Button>
    </>
  );
}

app/buttons/bad.tsx(6,15): error TS2322: Type '"ghost"' is not assignable to type '"contained" | "outlined" | null | undefined'.
app/buttons/bad.tsx(7,15): error TS2322: Type '"red"' is not assignable to type '"primary" | "accent" | "error" | "gray" | undefined'.
app/buttons/bad.tsx(8,15): error TS2322: Type '"xl"' is not assignable to type '"sm" | "md" | "lg" | null | undefined'.

6 · ใช้งานจริงบนหน้าเว็บ — loading state และ cn()

สร้างหน้า app/buttons/page.tsx วางปุ่มแบบเดียวกับสไลด์หน้า 29–30:

import Button from "@/components/Bases/Button";

export default function ButtonsPage() {
  return (
    <main className="flex flex-wrap items-center gap-3 p-8">
      <Button>Browse Recipes</Button>
      <Button variant="outlined">Share Your Recipe</Button>
      <Button variant="outlined" color="error">Delete recipe</Button>
      <Button color="accent" size="lg">Sign in</Button>
      <Button disabled>Disabled</Button>
      <Button loading>Saving...</Button>
      <Button size="sm">sm · 34px</Button>
      <Button size="md">md · 40px</Button>
      <Button size="lg">lg · 48px</Button>
    </main>
  );
}

npx next build ผ่าน · เปิด npx next start แล้ว curl หน้า /buttons ตัดมาเฉพาะปุ่ม disabled กับ loading (ผลรันจริง):

<button class="inline-flex … h-10 px-4 text-sm bg-primary text-primary-foreground hover:bg-primary/90" disabled="">Disabled</button>

<button class="inline-flex … h-10 px-4 text-sm bg-primary text-primary-foreground hover:bg-primary/90" disabled="" aria-busy="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle lucide-loader-2 size-4 animate-spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>Saving...</button>

(… คือ class ฐานที่ยาวเหมือนกันทุกปุ่ม ผมตัดออกให้อ่านง่าย ส่วนอื่นไม่ได้แก้)

loading state ในสไลด์หน้า 30 มีสองหน้าที่ ไม่ใช่แค่วงกลมหมุน:

• ห้ามกดซ้ำ — disabled={disabled || loading} ทำให้ปุ่มได้ attribute disabled จริง · เบราว์เซอร์ไม่ยิง click ให้ปุ่มที่ disabled → ผู้ใช้ที่ใจร้อนกด "บันทึก" สามครั้งจะไม่ส่งสูตรอาหารซ้ำสามรอบ · และได้ความจางจาก disabled:opacity-50 มาฟรี (ในภาพสไลด์ปุ่ม Saving… ก็จางกว่าปุ่มปกติ)
• บอกว่ากำลังทำงาน — spinner (Loader2Icon จาก lucide-react ที่ shadcn ติดตั้งไว้ + animate-spin) สำหรับตา · aria-busy="true" สำหรับโปรแกรมอ่านหน้าจอ · ส่วน aria-hidden บน svg กันไม่ให้มันอ่านไอคอนออกเสียง

เขียน aria-busy={loading || undefined} ไม่ใช่ ={loading} เพราะอยากให้ปุ่มปกติไม่มี attribute นี้เลย · ใน HTML ข้างบนปุ่ม Disabled ก็ไม่มี aria-busy จริง

ทำไม className ของคนใช้ต้องผ่าน cn()

สมมติหน้าไหนอยากได้ปุ่มเล็กแต่สูงพิเศษ เลยส่ง className="h-12 bg-accent" เข้ามา · class ใหม่ชนกับของเดิม (h-8.5, bg-primary) · ผมรันเทียบสามวิธี (ผลรันจริง):

ต่อ string เฉย ๆ:
  "inline-flex … disabled:opacity-50 h-8.5 px-3 text-sm bg-primary text-primary-foreground hover:bg-primary/90 h-12 bg-accent"
ผ่าน cn():
  "inline-flex … disabled:opacity-50 px-3 text-sm text-primary-foreground hover:bg-primary/90 h-12 bg-accent"
cva รับ className เอง (ไม่ผ่าน cn):
  "inline-flex … disabled:opacity-50 h-8.5 px-3 text-sm bg-primary text-primary-foreground hover:bg-primary/90 h-12 bg-accent"

แบบแรกกับแบบที่สามมีทั้ง h-8.5 และ h-12 อยู่ด้วยกัน · อันไหนชนะขึ้นกับว่า Tailwind เขียน rule ไหนไว้ทีหลังในไฟล์ CSS — ไม่ใช่ลำดับใน attribute class · ทายผลไม่ได้จากการอ่านโค้ด · cn() รู้ว่า h-8.5 กับ h-12 เป็นเรื่องเดียวกัน จึงลบตัวเก่าทิ้ง เก็บตัวที่มาทีหลัง

7 · เทียบกับ button.tsx ที่ shadcn สร้างให้ — ท่าเดียวกันเป๊ะ

สไลด์หน้า 15 เปิด components/ui/button.tsx ที่ได้จาก shadcn add button · ตอนนั้นอาจยังอ่านไม่ออก ตอนนี้อ่านออกแล้ว · นี่คือไฟล์จริงบนเครื่องที่ใช้ตรวจ ตัดเหลือโครง (… คือ class ยาว ๆ ที่ตัดออก):

// components/ui/button.tsx — สร้างโดย shadcn 4.21.0 (preset base-nova)
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-lg … disabled:pointer-events-none disabled:opacity-50 …",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline: "…", secondary: "…", ghost: "…", destructive: "…",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-8 gap-1.5 px-2.5 …", xs: "h-6 …", sm: "h-7 …", lg: "h-9 …",
        icon: "size-8", "icon-xs": "…", "icon-sm": "…", "icon-lg": "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  ...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
  return (
    <ButtonPrimitive
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

8 · ทบทวน

9 · ภารกิจ — เพิ่มแกนใหม่แล้วพิสูจน์ด้วยผลรัน

    variants: {
      // … variant / color / size เหมือนเดิม
      block: {
        true: "w-full",
        false: "",
      },
    },
    compoundVariants: [
      {
        variant: "outlined",
        size: "lg",
        className: "border-3",
      },
      // … กฎสีแปดข้อเหมือนเดิม
    ],
    defaultVariants: {
      variant: "contained",
      color: "primary",
      size: "md",
      block: false,
    },

{ variant: "outlined", size: "lg" }
  "inline-flex … disabled:opacity-50 border-2 bg-transparent h-12 px-6 text-base border-3 border-primary text-primary hover:bg-primary/10"
{ variant: "outlined", size: "md" }
  "inline-flex … disabled:opacity-50 border-2 bg-transparent h-10 px-4 text-sm border-primary text-primary hover:bg-primary/10"
{ variant: "contained", size: "lg" }
  "inline-flex … disabled:opacity-50 h-12 px-6 text-base bg-primary text-primary-foreground hover:bg-primary/90"
{ block: true }
  "inline-flex … disabled:opacity-50 h-10 px-4 text-sm w-full bg-primary text-primary-foreground hover:bg-primary/90"

app/buttons/bad.tsx(7,15): error TS2322: Type 'string' is not assignable to type 'boolean | null | undefined'.

"inline-flex … disabled:opacity-50 bg-transparent h-12 px-6 text-base border-3 border-primary text-primary hover:bg-primary/10"

อ้างอิง

• cva — Variants — อ่านหัวข้อ Compound Variants และ Default Variants ให้เห็นตัวอย่างทางการของสองช่องที่หัวข้อ 4 รันพิสูจน์ · สังเกตว่าในกฎ compound ใช้ได้ทั้ง class และ className
• cva — TypeScript — อ่านส่วนที่อธิบาย VariantProps · สั้นมาก และเป็นท่าเดียวกับบรรทัด export type ButtonVariantProps ในหัวข้อ 3
• shadcn/ui — Button — ดูหัวข้อ Usage และตัวอย่างที่ใช้ buttonVariants กับลิงก์ เพื่อเข้าใจว่าทำไม shadcn export buttonVariants ออกมาด้วย (ตารางหัวข้อ 7 แถวสุดท้าย)
• Tailwind CSS — height — ดูตาราง h-<number> ที่เขียนว่าคำนวณจาก calc(var(--spacing) * <number>) ซึ่งเป็นเหตุผลที่ h-8.5 ได้ 34px ตรงป้ายสไลด์หน้า 30
• MDN — <button> — อ่าน attribute disabled ในรายการ Attributes · และ MDN — aria-busy สำหรับเหตุผลของ aria-busy บนปุ่ม loading