Elemen Dasar
Chip (Notifikasi Overlay)
Titik atau angka penanda notifikasi yang diletakkan di sudut elemen interaktif.
Chip diletakkan di atas avatar atau tombol untuk menunjukkan status aktif atau jumlah berkas yang menunggu tindakan.
Pratinjau Komponen
PT
<!-- Tombol dengan Badge Counter -->
<div class="mjl-chip-wrapper">
<button class="mjl-btn mjl-btn--secondary mjl-btn--md">
Surat Masuk
</button>
<span class="mjl-chip">5</span>
</div>
Penggunaan CSS Murni
<!-- Dot Status -->
<div class="mjl-chip-wrapper">
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle">PT</span>
<span class="mjl-chip mjl-chip--dot mjl-chip--success"></span>
</div>
<!-- Counter Badge -->
<div class="mjl-chip-wrapper">
<button class="mjl-btn mjl-btn--secondary mjl-btn--md">Pesan</button>
<span class="mjl-chip">12</span>
</div>
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-chip-wrapper">
<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--md">Pesan</button>
<span class="mjl-chip" aria-hidden="true">12</span>
<span class="sr-only">12 pesan belum dibaca</span>
</span>
<script setup lang="ts">
import { MjlChip, MjlButton } from '@majalengka/vue';
</script>
<template>
<MjlChip :count="12" label="12 pesan belum dibaca">
<MjlButton variant="secondary">Pesan</MjlButton>
</MjlChip>
</template>
import type { ReactNode } from 'react';
export function MjlChip({ count, label, max = 99, children }: { count: number; label: string; max?: number; children: ReactNode }) {
return (
<span className="mjl-chip-wrapper">
{children}
{count > 0 && (
<>
<span className="mjl-chip" aria-hidden="true">{count > max ? `${max}+` : count}</span>
<span className="sr-only">{label}</span>
</>
)}
</span>
);
}
// Pemakaian: <MjlChip count={12} label="12 pesan belum dibaca"><button className="mjl-btn mjl-btn--secondary mjl-btn--md">Pesan</button></MjlChip>
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-chip',
standalone: true,
template: `
<span class="mjl-chip-wrapper">
<ng-content />
@if (count() > 0) {
<span class="mjl-chip" aria-hidden="true">{{ count() > 99 ? '99+' : count() }}</span>
<span class="sr-only">{{ label() }}</span>
}
</span>
`,
})
export class MjlChip {
count = input(0);
label = input.required<string>();
}
{{-- resources/views/components/mjl/chip.blade.php --}}
@props(['count' => 0, 'label'])
<span class="mjl-chip-wrapper">
{{ $slot }}
@if ($count > 0)
<span class="mjl-chip" aria-hidden="true">{{ $count > 99 ? '99+' : $count }}</span>
<span class="sr-only">{{ $label }}</span>
@endif
</span>
{{-- Pemakaian --}}
<x-mjl.chip :count="$jumlahPesan" :label="$jumlahPesan . ' pesan belum dibaca'">
<x-mjl.button variant="secondary">Pesan</x-mjl.button>
</x-mjl.chip>
<?php $jumlah = 12; ?>
<span class="mjl-chip-wrapper">
<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--md">Pesan</button>
<?php if ($jumlah > 0): ?>
<span class="mjl-chip" aria-hidden="true"><?= $jumlah > 99 ? '99+' : $jumlah ?></span>
<span class="sr-only"><?= $jumlah ?> pesan belum dibaca</span>
<?php endif; ?>
</span>
Angka pada chip disembunyikan dari pembaca layar (aria-hidden); prop label wajib diisi sebagai gantinya. Angka di atas max (default 99) tampil sebagai 99+.