ABasic card
Header · title · subtitle
Body menggunakan Outfit dan Surface Language Foundation Phase 2.1.
Basic Components
Primitive reusable untuk seluruh ekosistem PA DEV Admin Theme.
Theme Demo · Basic Components
Komponen dasar yang konsisten, bukan kumpulan contoh acak
Sembilan primitive berikut memakai token Foundation yang sama, kontrak aksesibilitas eksplisit, dan API presentasi murni agar dapat diadaptasi lintas project PA DEV.
Status primitive
Badge / Label
Label ringkas untuk status, kategori, dan metadata non-interaktif.
Solid
Primary
Secondary
Success
Warning
Danger
Info
Neutral
Dark
Soft
Primary
Secondary
Success
Warning
Danger
Info
Neutral
Dark
Outline
Primary
Secondary
Success
Warning
Danger
Info
Neutral
Dark
Size & content
Small
Medium
Verified
Removable
Contoh label dapat dihapus
Status use cases
Active
Inactive
Pending
Approved
Rejected
Draft
Variants
8 tones · Solid / Soft / Outline
Sizes
SM · MD
States
Status text · Dot · Icon · Removable visual
- Accessibility
- Status selalu membawa teks atau ikon/dot pendamping sehingga warna bukan satu-satunya pembeda.
- Usage
- Pilih solid hanya untuk emphasis; gunakan soft sebagai default pada surface terang.
- Token
semantic color tokens · --radius-full · Outfit caption
Identity primitive
Avatar
Representasi identitas melalui gambar, inisial, atau icon fallback.
Variants & fallback
Andi Saputra
Pengguna tanpa foto
Sizes
Avatar XS
Avatar SM
Avatar MD
Avatar LG
Avatar XL
Status & shape
Online user
Away user
Busy user
Offline user
Square avatar
Avatar group
Andi Saputra
Budi Rahman
Citra Dewi
Dian Putri
+8
Variants
Image · Initial · Icon · Round / Square
Sizes
XS · SM · MD · LG · XL
States
Online · Away · Busy · Offline · Image fallback
- Accessibility
- Image mempunyai alt text; fallback tetap tersedia; status indicator membawa label aksesibel.
- Usage
- Pakai ukuran MD untuk list umum; group untuk kolaborator dalam jumlah terbatas.
- Token
--color-primary · --color-surface · --radius-full · spacing scale
Metadata primitive
Chip / Tag
Metadata kompak yang dapat menunjukkan selection tanpa menjadi input kompleks.
Variants
Default
Primary
Success
Warning
Danger
Neutral
Content
Text
Dengan icon
Dengan avatar
Removable
Contoh chip dapat dihapus
States
Default
Disabled
Variants
Default · Primary · Success · Warning · Danger · Neutral
Sizes
Content driven · 32px minimum height
States
Default · Selected · Disabled · Removable visual
- Accessibility
- Selected memakai aria-pressed dan ikon; disabled memakai aria-disabled, bukan opacity saja.
- Usage
- Gunakan chip untuk filter ringan atau kategori; removal pada showcase hanya visual.
- Token
semantic color tokens · --radius-full · --duration-fast
Surface primitive
Basic Card
Surface konten reusable dengan anatomy header, body, footer, dan action area.
Bordered card
Header · title · subtitle
Body menggunakan Outfit dan Surface Language Foundation Phase 2.1.
Elevated card
Header · title · subtitle
Body menggunakan Outfit dan Surface Language Foundation Phase 2.1.
Soft card
Header · title · subtitle
Body menggunakan Outfit dan Surface Language Foundation Phase 2.1.
Interactive card
Dapat difokuskan dan diaktifkan
Body menggunakan Outfit dan Surface Language Foundation Phase 2.1.
Compact card
Header · title · subtitle
Konten padat untuk informasi pendek.
Information
Reusable message
Gunakan untuk informasi pendukung, bukan alert kritis.
Andi Saputra
Product Designer
Simple profile card tanpa business data.
1.248
Active Projects
Naik 8% dari periode sebelumnya.
Belum ada data
Empty placeholder
Konten akan tampil ketika data tersedia.
Variants
Basic · Bordered · Elevated · Soft · Interactive · Compact
Sizes
Default · Compact · responsive grid
States
Static · Interactive hover/focus
- Accessibility
- Struktur heading terjaga, link interactive dapat difokuskan, body tetap memakai Outfit.
- Usage
- Pilih elevation berdasarkan hierarchy; hover hanya dipakai pada interactive card.
- Token
--color-surface · --color-border · --shadow-* · --radius-lg
Structure primitive
Divider
Pemisah konten horizontal, vertikal, berlabel, atau gradient halus.
Horizontal & gradient
Konten sebelum divider
Konten setelah divider
With text
Centered text
Left text
Vertical
Left content
Right content
Variants
Horizontal · Vertical · Text center/left · Gradient
Sizes
Content width / height
States
Semantic · Decorative
- Accessibility
- role separator dan aria-orientation tersedia; vertical divider disembunyikan pada mobile.
- Usage
- Gunakan separator semantik hanya bila pemisahan bermakna; dekoratif harus tersembunyi dari screen reader.
- Token
--color-border · --color-primary · spacing scale
Context primitive
Tooltip
Hint kontekstual ringan untuk label tambahan pada kontrol ringkas.
Top
Right
Bottom
Left
Variants
Top · Right · Bottom · Left
Sizes
Max width 240px
States
Hidden · Hover · Focus · Escape closed
- Accessibility
- Hover dan keyboard focus, role tooltip, aria-describedby, Escape, viewport clamping, reduced motion.
- Usage
- Jangan menaruh informasi kritis hanya di tooltip; teks harus pendek dan langsung.
- Token
--color-text-primary · --shadow-lg · --duration-fast