Apa itu Pembuat Lencana & Tombol?

Pembuat Lencana & Tombol membuat lencana dan perisai kustom dengan pilihan teks, warna, dan bentuk Anda. Isi label dan nilai, pilih gaya, lalu unduh sebagai PNG atau SVG.

Membuat badge bergaya shields.io (kapsul berwarna yang terbagi menjadi label abu-abu dan value berwarna) dirender sebagai SVG inline. Pilih bentuk flat, flat-square, rounded, pill, atau for-the-badge; atur warna hex untuk masing-masing sisi serta warna teks tersendiri untuk label dan nilai; tambahkan logo teknologi (GitHub, npm, Docker, Python, Node.js, dan lainnya) lalu warna mereknya akan diterapkan otomatis; bungkus badge dengan URL yang bisa diklik; salin hasilnya sebagai Markdown untuk README, HTML untuk email atau halaman web, atau unduh sebagai SVG tajam dan PNG resolusi tiga kali lipat. Tambahkan beberapa badge ke daftar dan salin semua cuplikan Markdown sekaligus atau simpan sebagai berkas .md. Lebar menyesuaikan teks secara otomatis, sehingga 'Build / Passing' dan 'License / Apache 2.0' tampak seimbang tanpa pengaturan manual.

Cara menggunakan

1. Masukkan teks lencana Anda — pilih label di sisi kiri dan nilai di sisi kanan seperti 'Version' dan '2.0'.
2. Pilih warna untuk latar label dan value, pilih bentuk, dan jika perlu tambahkan logo teknologi di sebelah kiri.
3. Lihat badge ter-update langsung, lalu unduh sebagai PNG atau SVG, atau salin sebagai Markdown atau HTML untuk ditempel di README atau halaman.

Kapan menggunakan

• Menambahkan badge build, versi, atau coverage di README GitHub tanpa penyedia CI.
• Memasang label 'Beta', 'Baru', atau 'Pro' di baris fitur atau tier harga di landing page.
• Menyorot chip tech stack di portofolio pribadi atau CV PDF.

Hasil

Buat lencana status proyek: Label "Build" abu-abu, Nilai "Passing" hijau, gaya flat. Hasilnya lencana status seperti yang ada di repositori GitHub.

FAQ

Apakah badge tetap berfungsi kalau saya host sendiri sebagai PNG, bukan via shields.io?

Iya. SVG dan PNG yang diunduh adalah berkas mandiri dan tidak memanggil server mana pun. Kekurangannya dibanding shields.io adalah tidak ada data live: badge 'version 1.2' akan tetap 1.2 sampai Anda menggenerasinya ulang.

Apa beda gaya flat, rounded, dan pill?

Flat punya sudut tegas dengan gradien tipis, flat-square berbentuk sama tetapi tanpa gradien, rounded memakai radius 4 px, pill membuat kedua ujungnya jadi setengah lingkaran penuh, dan for-the-badge adalah gaya tebal, lebih tinggi, semua huruf kapital yang umum di baris badge README. Pilih yang paling cocok dengan tampilan di sekitarnya.

Bisa pakai warna brand sendiri, bukan hijau-abu bawaan?

Bisa — warna label, warna nilai, dan warna teks tersendiri untuk masing-masing sisi semuanya pemilih hex. Coba label gelap dengan teks terang dan nilai cerah untuk kontras tinggi. Pratinjau langsung berubah saat diketik.

Pilih SVG atau PNG?

SVG untuk README GitHub, situs web, dan mana pun yang mungkin di-zoom (tetap tajam). PNG kalau ditempel di tempat yang tidak merender SVG: dokumen Word, pesan Slack, atau beberapa alat screenshot.

Kenapa PNG lebih besar dari SVG?

PNG dirender pada resolusi 3x ukuran layar supaya tetap tajam di display high-DPI. SVG badge biasa di bawah 1 KB; PNG umumnya 5-15 KB. Pakai SVG kalau ukuran berkas penting, PNG kalau kompatibilitas yang penting.

Alat terkait