Live Docs

Navigation

Forms /

stable

Button

Trigger aksi utama, sekunder, atau destruktif. 7 tones × 5 variants × 3 sizes = ekspresif tapi konsisten.

import { Button } from "@naraya/ui";

Overview

Kapan pakai Button?

Button untuk aksi yang user trigger (submit, save, cancel, navigate-as-action). Untuk navigasi semantic (pindah halaman), pakai Link via Text variant="link".

Ekosistem Naraya: dipakai di NaraEdu (Submit jawaban, Lanjutkan), NaraAI (Run prompt), NaraBiz (Checkout, Tambah produk).

Examples

Default

<Button>Klik saya</Button>

Tones

7 semantic tones. Pakai sesuai makna aksi, bukan warna.

<Button tone="primary">Primary</Button>
<Button tone="success">Success</Button>
<Button tone="error">Error</Button>
// ...all 7 tones

Variants

Solid (default), soft, outline, ghost, glass.

<Button variant="solid">Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="glass">Glass</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With icon

import { Plus, ArrowRight, Download } from "@naraya/icons";

<Button iconLeft={<Plus size={16} />}>Tambah</Button>
<Button iconRight={<ArrowRight size={16} />} tone="accent">Lanjutkan</Button>
<Button iconLeft={<Download size={16} />} variant="outline">Unduh</Button>

Loading & Disabled

<Button isLoading>Memuat...</Button>
<Button disabled>Disabled</Button>

Full width

<Button fullWidth tone="primary">Lanjutkan ke checkout</Button>

Props

PropTypeDefaultDescription
tone"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error""primary"Semantic tone, dipakai untuk meaning.
variant"solid" | "soft" | "outline" | "ghost" | "glass""solid"Visual style. Solid untuk primary action.
size"sm" | "md" | "lg""md"Ukuran. md default, lg untuk hero CTA.
iconLeftReactNode—Icon di kiri label.
iconRightReactNode—Icon di kanan label.
isLoadingbooleanfalseAuto-disable + tampilkan loader.
fullWidthbooleanfalse100% width dari parent.
disabledbooleanfalseDisable interaksi.
...restButtonHTMLAttributes—Semua atribut HTML button standar (onClick, type, form, etc).

Tokens Used

--color-{tone}

Background solid + ring color

--color-{tone}-content

Text on-color

--color-{tone}-hover

Hover state (auto-derived untuk primary)

--radius-md

Border radius default

--duration-fast

Transition timing 120ms

--easing-snappy

Easing curve untuk feedback langsung

Accessibility

  • Render sebagai native <button>, default type=&apos;button&apos; untuk hindari accidental form submit.
  • Focus ring visible dengan keyboard navigation (focus-visible).
  • aria-busy=true otomatis saat isLoading.
  • disabled state respect aria-disabled + pointer-events: none.
  • Icon-only button perlu aria-label eksplisit (gunakan IconButton component jika tersedia).