⌘ Anatomy
Fungsi dan Cara Penggunaannya
*
Komponen badge berfungsi sebagai label atau tanda visual untuk memberikan konteks atau informasi tambahan pada teks atau elemen lainnya.
**
Memberikan label atau penanda untuk menunjukkan status atau kategori suatu elemen.
Penjelasan Component Variant
1
Sebagai label yang menunjukkan status atau klasifikasi.
↔ Spacing
Badges Variant
Width
Hug
57px
Height
Hug
24px
Direction
Horizontal
Align Children
Top Left
Badges Base
Width
Hug
57px
Height
Hug
24px
Fill variable
Surface/Surface - Primary
Direction
Horizontal
Align Children
Center
Padding
XS
LG
Gap
XL
Corner radius
XS
The Components
Spectral Badges With Label
⌘ Anatomy
Fungsi dan Cara Penggunaannya
*
Komponen badge berfungsi sebagai label atau tanda visual untuk memberikan konteks atau informasi tambahan pada teks atau elemen lainnya.
*
Ditampilkan di area profil pengguna atau halaman “About Us” untuk memperlihatkan anggota tim.
Penjelasan Component Variant
1
Merupakan konten atau informasi utama yang disertai dengan badge.
2
Badge ini adalah label yang memberikan konteks atau kategori tambahan pada teks utama.
↔ Spacing
Badges Group
Width
Hug
342px
Height
Hug
32px
Fill variable
Surface/Surface - Primary
Direction
Horizontal
Align Children
Center Left
Padding
SM
LG
SM
SM
Gap
LG
Corner radius
Display 2XL
Badges Variant
Width
Hug
103px
Height
Hug
24px
Direction
Horizontal
Align Children
Top Left
Corner radius
Display 2XL