Elemen Dasar
Badge (Lencana Status)
Lencana visual ringkas untuk menampilkan status permohonan layanan, kategori dokumen, atau tag informasi.
Badge (.mjl-badge) berfungsi memberikan penanda status cepat kepada warga dan operator sistem mengenai kondisi suatu data atau permohonan — seperti status Menunggu Verifikasi, Disetujui, atau Ditolak.
1. Variasi Status (Semantic Variants)
Tersedia 5 warna semantik yang konsisten di seluruh instansi:
Pratinjau Status Badge
Disetujui
Menunggu Verifikasi
Berkas Ditolak
Sedang Diproses
Draf Pengajuan
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<span class="mjl-badge mjl-badge--success">Disetujui</span>
<span class="mjl-badge mjl-badge--warning">Menunggu Verifikasi</span>
<span class="mjl-badge mjl-badge--danger">Ditolak</span>
<script setup lang="ts">
import { MjlBadge } from '@majalengka/vue';
</script>
<template>
<MjlBadge variant="success">Disetujui</MjlBadge>
<MjlBadge variant="warning">Menunggu Verifikasi</MjlBadge>
<MjlBadge variant="danger" :icon="false">Ditolak</MjlBadge>
</template>
import type { ReactNode } from 'react';
type Status = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
export function MjlBadge({ variant = 'neutral', children }: { variant?: Status; children: ReactNode }) {
return <span className={`mjl-badge mjl-badge--${variant}`}>{children}</span>;
}
// Pemakaian
export function StatusBerkas({ status }: { status: 'disetujui' | 'ditolak' }) {
return status === 'disetujui'
? <MjlBadge variant="success">Disetujui</MjlBadge>
: <MjlBadge variant="danger">Ditolak</MjlBadge>;
}
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-badge',
standalone: true,
template: `<span class="mjl-badge mjl-badge--{{ variant() }}"><ng-content /></span>`,
})
export class MjlBadge {
variant = input<'success' | 'warning' | 'danger' | 'info' | 'neutral'>('neutral');
}
// Pemakaian: <mjl-badge variant="success">Disetujui</mjl-badge>
{{-- resources/views/components/mjl/badge.blade.php --}}
@props(['variant' => 'neutral'])
<span {{ $attributes->class(["mjl-badge mjl-badge--{$variant}"]) }}>{{ $slot }}</span>
{{-- Pemakaian --}}
<x-mjl.badge :variant="$permohonan->disetujui ? 'success' : 'warning'">
{{ $permohonan->status_label }}
</x-mjl.badge>
<?php
$status = ['label' => 'Menunggu Verifikasi', 'variant' => 'warning'];
?>
<span class="mjl-badge mjl-badge--<?= $status['variant'] ?>">
<?= htmlspecialchars($status['label'], ENT_QUOTES, 'UTF-8') ?>
</span>
2. Rasio Kontras Aksesibilitas (WCAG 2.1 AA)
Semua kombinasi warna teks dan latar belakang badge telah diuji agar terbaca jelas oleh penderita gangguan penglihatan warna:
| Status | Warna Latar Belakang | Warna Teks | Rasio Kontras | Status WCAG AA |
|---|---|---|---|---|
| Success | #E6F6ED (Hijau Muda) | #0F7B4A (Hijau Tua) | 4.9:1 | ✅ Lolos (Min 4.5:1) |
| Warning | #FEF3E6 (Kuning Jingga) | #A65A00 (Cokelat Tua) | 5.4:1 | ✅ Lolos (Min 4.5:1) |
| Danger | #FDF2F2 (Merah Muda) | #B3261E (Merah Tua) | 5.8:1 | ✅ Lolos (Min 4.5:1) |
| Info | #EBF5FB (Biru Langit) | #0B6FA4 (Biru Tua) | 5.1:1 | ✅ Lolos (Min 4.5:1) |
| Neutral | #EEF0F4 (Abu-abu) | #363D4D (Abu Gelap) | 8.2:1 | ✅ Lolos (Min 4.5:1) |
3. Integrasi Vue 3 (@majalengka/vue)
<script setup lang="ts">
import { MjlBadge } from '@majalengka/vue';
</script>
<template>
<div class="flex items-center gap-2">
<MjlBadge status="success" dot>Permohonan Selesai</MjlBadge>
<MjlBadge status="warning">Perlu Perbaikan KTP</MjlBadge>
<MjlBadge status="info">Diproses Disdukcapil</MjlBadge>
</div>
</template>
Properti Komponen (Props API)
| Properti | Tipe | Nilai Bawaan | Deskripsi |
|---|---|---|---|
status | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'neutral' | Nada warna semantik badge |
dot | boolean | false | Menampilkan indikator titik bulat di sebelah kiri teks |
pill | boolean | false | Menggunakan sudut membulat penuh (fully rounded) |