Komponen UI
Tombol, input, badge, dan elemen lainnya dengan warna palet Anda
Peringatan
| Solid | Lembut | |
|---|---|---|
Primer | Pembaruan tersedia | Pembaruan tersedia |
Sekunder | Pembaruan tersedia | Pembaruan tersedia |
Tersier | Pembaruan tersedia | Pembaruan tersedia |
Aksen | Pembaruan tersedia | Pembaruan tersedia |
Permukaan | Pembaruan tersedia | Pembaruan tersedia |
Primer#264653
Solid
Pembaruan tersedia
Lembut
Pembaruan tersedia
Sekunder#2A9D8F
Solid
Pembaruan tersedia
Lembut
Pembaruan tersedia
Tersier#E9C46A
Solid
Pembaruan tersedia
Lembut
Pembaruan tersedia
Aksen#F4A261
Solid
Pembaruan tersedia
Lembut
Pembaruan tersedia
Permukaan#E76F51
Solid
Pembaruan tersedia
Lembut
Pembaruan tersedia
Sorotan
| Solid | Lembut | Permukaan | Garis Tepi | |
|---|---|---|---|---|
Primer | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. |
Sekunder | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. |
Tersier | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. |
Aksen | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. |
Permukaan | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. | Punya masukan? Kami ingin tahu pendapat Anda. |
Primer#264653
Solid
Punya masukan?
Kami ingin tahu pendapat Anda.
Lembut
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan
Punya masukan?
Kami ingin tahu pendapat Anda.
Garis Tepi
Punya masukan?
Kami ingin tahu pendapat Anda.
Sekunder#2A9D8F
Solid
Punya masukan?
Kami ingin tahu pendapat Anda.
Lembut
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan
Punya masukan?
Kami ingin tahu pendapat Anda.
Garis Tepi
Punya masukan?
Kami ingin tahu pendapat Anda.
Tersier#E9C46A
Solid
Punya masukan?
Kami ingin tahu pendapat Anda.
Lembut
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan
Punya masukan?
Kami ingin tahu pendapat Anda.
Garis Tepi
Punya masukan?
Kami ingin tahu pendapat Anda.
Aksen#F4A261
Solid
Punya masukan?
Kami ingin tahu pendapat Anda.
Lembut
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan
Punya masukan?
Kami ingin tahu pendapat Anda.
Garis Tepi
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan#E76F51
Solid
Punya masukan?
Kami ingin tahu pendapat Anda.
Lembut
Punya masukan?
Kami ingin tahu pendapat Anda.
Permukaan
Punya masukan?
Kami ingin tahu pendapat Anda.
Garis Tepi
Punya masukan?
Kami ingin tahu pendapat Anda.
Lencana
| Solid | Lembut | Permukaan | Garis Tepi | |
|---|---|---|---|---|
Primer | Baru | Baru | Baru | Baru |
Sekunder | Baru | Baru | Baru | Baru |
Tersier | Baru | Baru | Baru | Baru |
Aksen | Baru | Baru | Baru | Baru |
Permukaan | Baru | Baru | Baru | Baru |
Primer#264653
Solid
Baru
Lembut
Baru
Permukaan
Baru
Garis Tepi
Baru
Sekunder#2A9D8F
Solid
Baru
Lembut
Baru
Permukaan
Baru
Garis Tepi
Baru
Tersier#E9C46A
Solid
Baru
Lembut
Baru
Permukaan
Baru
Garis Tepi
Baru
Aksen#F4A261
Solid
Baru
Lembut
Baru
Permukaan
Baru
Garis Tepi
Baru
Permukaan#E76F51
Solid
Baru
Lembut
Baru
Permukaan
Baru
Garis Tepi
Baru
Avatar
| Solid | Lembut | Gradien Solid | Gradien Lembut | |
|---|---|---|---|---|
Primer | E EV | E EV | E EV | E EV |
Sekunder | E EV | E EV | E EV | E EV |
Tersier | E EV | E EV | E EV | E EV |
Aksen | E EV | E EV | E EV | E EV |
Permukaan | E EV | E EV | E EV | E EV |
Primer#264653
Solid
E
EV
Lembut
E
EV
Gradien Solid
E
EV
Gradien Lembut
E
EV
Sekunder#2A9D8F
Solid
E
EV
Lembut
E
EV
Gradien Solid
E
EV
Gradien Lembut
E
EV
Tersier#E9C46A
Solid
E
EV
Lembut
E
EV
Gradien Solid
E
EV
Gradien Lembut
E
EV
Aksen#F4A261
Solid
E
EV
Lembut
E
EV
Gradien Solid
E
EV
Gradien Lembut
E
EV
Permukaan#E76F51
Solid
E
EV
Lembut
E
EV
Gradien Solid
E
EV
Gradien Lembut
E
EV
Kemajuan
| Solid | Lembut | |
|---|---|---|
Primer | Kemajuan55% | Kemajuan55% |
Sekunder | Kemajuan55% | Kemajuan55% |
Tersier | Kemajuan55% | Kemajuan55% |
Aksen | Kemajuan55% | Kemajuan55% |
Permukaan | Kemajuan55% | Kemajuan55% |
Primer#264653
Solid
Kemajuan55%
Lembut
Kemajuan55%
Sekunder#2A9D8F
Solid
Kemajuan55%
Lembut
Kemajuan55%
Tersier#E9C46A
Solid
Kemajuan55%
Lembut
Kemajuan55%
Aksen#F4A261
Solid
Kemajuan55%
Lembut
Kemajuan55%
Permukaan#E76F51
Solid
Kemajuan55%
Lembut
Kemajuan55%
Tombol
| Modern | Klasik | Solid | Lembut | Permukaan | Garis Tepi | |
|---|---|---|---|---|---|---|
Primer | ||||||
Sekunder | ||||||
Tersier | ||||||
Aksen | ||||||
Permukaan |
Primer#264653
Modern
Klasik
Solid
Lembut
Permukaan
Garis Tepi
Sekunder#2A9D8F
Modern
Klasik
Solid
Lembut
Permukaan
Garis Tepi
Tersier#E9C46A
Modern
Klasik
Solid
Lembut
Permukaan
Garis Tepi
Aksen#F4A261
Modern
Klasik
Solid
Lembut
Permukaan
Garis Tepi
Permukaan#E76F51
Modern
Klasik
Solid
Lembut
Permukaan
Garis Tepi
Kontrol Formulir
| Solid | Lembut | |
|---|---|---|
Primer | ||
Sekunder | ||
Tersier | ||
Aksen | ||
Permukaan |
Primer#264653
Solid
Lembut
Sekunder#2A9D8F
Solid
Lembut
Tersier#E9C46A
Solid
Lembut
Aksen#F4A261
Solid
Lembut
Permukaan#E76F51
Solid
Lembut
Input
| Default | Fokus | |
|---|---|---|
Primer | Placeholder | Placeholder Teks bantuan |
Sekunder | Placeholder | Placeholder Teks bantuan |
Tersier | Placeholder | Placeholder Teks bantuan |
Aksen | Placeholder | Placeholder Teks bantuan |
Permukaan | Placeholder | Placeholder Teks bantuan |
Primer#264653
Default
Placeholder
Fokus
Placeholder
Teks bantuanSekunder#2A9D8F
Default
Placeholder
Fokus
Placeholder
Teks bantuanTersier#E9C46A
Default
Placeholder
Fokus
Placeholder
Teks bantuanAksen#F4A261
Default
Placeholder
Fokus
Placeholder
Teks bantuanPermukaan#E76F51
Default
Placeholder
Fokus
Placeholder
Teks bantuanTautan
| Sebaris | |
|---|---|
Primer | Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna. |
Sekunder | Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna. |
Tersier | Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna. |
Aksen | Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna. |
Permukaan | Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna. |
Primer#264653
Sebaris
Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna.
Sekunder#2A9D8F
Sebaris
Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna.
Tersier#E9C46A
Sebaris
Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna.
Aksen#F4A261
Sebaris
Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna.
Permukaan#E76F51
Sebaris
Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang API warna.
Tab
| Garis Bawah | |
|---|---|
Primer | Akun Pesanan Pengaturan Notif. |
Sekunder | Akun Pesanan Pengaturan Notif. |
Tersier | Akun Pesanan Pengaturan Notif. |
Aksen | Akun Pesanan Pengaturan Notif. |
Permukaan | Akun Pesanan Pengaturan Notif. |
Primer#264653
Garis Bawah
Akun
Pesanan
Pengaturan
Notif.
Sekunder#2A9D8F
Garis Bawah
Akun
Pesanan
Pengaturan
Notif.
Tersier#E9C46A
Garis Bawah
Akun
Pesanan
Pengaturan
Notif.
Aksen#F4A261
Garis Bawah
Akun
Pesanan
Pengaturan
Notif.
Permukaan#E76F51
Garis Bawah
Akun
Pesanan
Pengaturan
Notif.