Kullanıcının o anda çevrimiçi olup olmadığı veya sistemin normal şekilde çalışıp çalışmadığı gibi gerçek zamanlı durumu görsel olarak aktaran küçük bir rozet (gösterge) kullanıcı arayüzü.Dalgaların iç noktalardan dışarıya doğru yayılmasına neden olan CSS animasyonunu (Ping/Pulse efekti) kullanır.
<!-- Status: Online (Green) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20 rounded-full">
<div class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
</div>
<span class="text-sm font-medium text-emerald-700 dark:text-emerald-400">System Operational</span>
</div>
<!-- Status: Live (Red) -->
<div class="flex items-center gap-2 px-3 py-1.5 bg-rose-50 dark:bg-rose-500/10 border border-rose-100 dark:border-rose-500/20 rounded-full">
<div class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
</div>
<span class="text-sm font-medium text-rose-700 dark:text-rose-400">Live Streaming</span>
</div>