Advanced · Level 17: Design SystemAdvanced70 menitBahasa Indonesia

Button Variants

Mendesain Button primary, secondary, dan destructive dengan variant yang typed serta state disabled dan focus yang dapat diakses.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan intent primary, secondary, dan destructive dari sekadar warna button
Membatasi variants dengan union type yang dapat diperiksa caller
Menjaga disabled attribute serta visible focus state pada control native
Menghindari boolean visual yang bertentangan seperti isPrimary dan isDanger sekaligus

ReactButtonVariantsTypeScriptAccessibility

Isi lesson

6 blok

1.
Variant menyatakan intent, bukan sekadar cat warnaBelum selesaiWajib
2.
Button API dengan intent dan size yang terbatasBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Disabled bukan alasan menghilangkan focus feedbackBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Variant menyatakan intent, bukan sekadar cat warna

Wajib

Button primary biasanya membawa action utama pada context saat ini, secondary mendukung action alternatif, dan destructive memberi sinyal tindakan yang berisiko atau sulit dibatalkan. Variant bukan dekorasi bebas; ia adalah contract product dan accessibility. Jika semua action memakai primary, user tidak tahu mana langkah utama. Jika destructive hanya dibedakan lewat merah tanpa label atau context, user tetap dapat salah mengerti dampaknya.

Pada component Button, union type seperti primary | secondary | destructive membuat caller memilih intent yang didukung. size juga dapat menjadi union kecil bila memang diperlukan oleh beberapa context. Gunakan button native, disabled attribute saat action belum boleh dijalankan, dan focus-visible style yang tetap terlihat pada semua variant. Jangan memakai isPrimary, isSecondary, dan isDanger karena kombinasi boolean itu dapat menciptakan state yang saling bertentangan.

Bagian ini memengaruhi progres lesson.

Button API dengan intent dan size yang terbatas

Wajib

tsx

import type { ReactNode } from "react";

type ButtonVariant = "primary" | "secondary" | "destructive";
type ButtonSize = "sm" | "md";

type CourseButtonProps = {
  children: ReactNode;
  variant: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  onClick?: () => void;
};

export function CourseButton({
  children,
  variant,
  size = "md",
  disabled = false,
  onClick,
}: CourseButtonProps) {
  return (
    <button
      type="button"
      className={"button button--" + variant + " button--" + size}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

variant wajib karena caller perlu memilih intent action secara sadar. size default md karena ini pilihan ukuran umum yang tidak perlu diulang di setiap caller. disabled memakai native attribute agar interaction serta accessibility semantics mengikuti element button. CSS untuk button--primary, button--secondary, dan button--destructive kemudian memakai token color, spacing, radius, serta focus ring yang sesuai.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course button variants

Buat CourseButton dengan primary, secondary, dan destructive intent; size kecil/medium; serta disabled state native.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa Button variant lebih aman memakai union type daripada isPrimary dan isDestructive?

Progres lesson naik setelah jawaban benar.

Peringatan

Opsional

Disabled bukan alasan menghilangkan focus feedback

Button disabled memang tidak dapat diaktifkan, tetapi button yang aktif harus memiliki focus indicator yang terlihat ketika user bernavigasi dengan keyboard. Pastikan focus-visible tidak tertutup oleh background variant, dan jangan memakai disabled hanya untuk menyembunyikan error validation tanpa menjelaskan apa yang perlu diperbaiki. Jika action destructive, gunakan copy yang jelas serta confirmation flow bila dampaknya besar.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Button variant menyatakan intent product primary, secondary, atau destructive.
Union type mencegah kombinasi boolean visual yang saling bertentangan.
Button native, disabled attribute, dan focus-visible adalah bagian dari contract variant.
Token color, spacing, dan radius membuat CSS variant tidak mengulang nilai satu kali pakai.
Berikutnya, Card variants menerapkan prinsip yang sama pada surface product yang membawa content lebih banyak.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Variant menyatakan intent, bukan sekadar cat warna.

Memuat progres Review module