StatusBadge

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<StatusBadge
  status="operational"
/>

Legacy mount name: data-component="StatusBadge".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/StatusBadge.wrn

component StatusBadge {
  props {
    class = ""
    status = "operational"
  }
  view {
        <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold {status === 'operational' ? 'bg-emerald-100 text-emerald-700' : status === 'degraded' ? 'bg-amber-100 text-amber-700' : status === 'outage' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'} {class}">
        <span class="size-2 rounded-full bg-current">
        </span>{status}</span>
    }
}