Skip to content
Praesepe UI

data-display

Badge

Compact status labels with solid, soft, and outline tones, optional status dots, and removable actions.

Copied!

Examples

Invoice statuses

Indonesian SME invoice states using soft badges with dots.

Copied!
Paid · INV-2026-089 Awaiting payment Overdue Draft 
<div class="flex flex-wrap gap-2">
    <x-ui.badge variant="soft" color="success" dot>Paid · INV-2026-089</x-ui.badge>
    <x-ui.badge variant="soft" color="warning" dot>Awaiting payment</x-ui.badge>
    <x-ui.badge variant="soft" color="danger" dot>Overdue</x-ui.badge>
    <x-ui.badge variant="soft" color="info" dot>Draft</x-ui.badge>
</div>

<div class="flex flex-wrap gap-2">
    <span class="inline-flex items-center gap-1.5 rounded-pill bg-success-soft px-2 py-0.5 text-xs font-medium tabular-nums text-success shadow-2xs">
        <span class="size-1.5 rounded-full bg-success" aria-hidden="true"></span>
        Paid · INV-2026-089
    </span>
    <span class="inline-flex items-center gap-1.5 rounded-pill bg-warning-soft px-2 py-0.5 text-xs font-medium tabular-nums text-warning shadow-2xs">
        <span class="size-1.5 rounded-full bg-warning" aria-hidden="true"></span>
        Awaiting payment
    </span>
    <span class="inline-flex items-center gap-1.5 rounded-pill bg-danger-soft px-2 py-0.5 text-xs font-medium tabular-nums text-danger shadow-2xs">
        <span class="size-1.5 rounded-full bg-danger" aria-hidden="true"></span>
        Overdue
    </span>
    <span class="inline-flex items-center gap-1.5 rounded-pill bg-info-soft px-2 py-0.5 text-xs font-medium tabular-nums text-info shadow-2xs">
        <span class="size-1.5 rounded-full bg-info" aria-hidden="true"></span>
        Draft
    </span>
</div>

Variants and colors

Solid, soft, and outline across semantic colors.

Copied!
Brand Success Danger Neutral
Small Medium 
<div class="space-y-3">
    <div class="flex flex-wrap gap-2">
        <x-ui.badge variant="solid" color="brand">Brand</x-ui.badge>
        <x-ui.badge variant="solid" color="success">Success</x-ui.badge>
        <x-ui.badge variant="outline" color="danger">Danger</x-ui.badge>
        <x-ui.badge variant="soft" color="neutral">Neutral</x-ui.badge>
    </div>
    <div class="flex flex-wrap gap-2">
        <x-ui.badge size="sm" color="info">Small</x-ui.badge>
        <x-ui.badge size="md" color="info">Medium</x-ui.badge>
    </div>
</div>

<div class="space-y-3">
    <div class="flex flex-wrap gap-2">
        <span class="inline-flex rounded-pill bg-brand px-2 py-0.5 text-xs font-medium text-on-brand">Brand</span>
        <span class="inline-flex rounded-pill bg-success px-2 py-0.5 text-xs font-medium text-on-success">Success</span>
        <span class="inline-flex rounded-pill border border-danger bg-transparent px-2 py-0.5 text-xs font-medium text-danger">Danger</span>
    </div>
    <div class="flex flex-wrap gap-2">
        <span class="inline-flex rounded-pill bg-surface-sunken px-1.5 py-0.5 text-[11px] font-medium text-fg">Small</span>
        <span class="inline-flex rounded-pill bg-surface-sunken px-2 py-0.5 text-xs font-medium text-fg">Medium</span>
    </div>
</div>

Removable filter chip

Dismissible badge for active filters.

Copied!
Cabang Bandung 
<div x-data="{ show: true }">
    <span x-show="show">
        <x-ui.badge variant="soft" color="brand" removable x-on:click="show = false">
            Cabang Bandung
        </x-ui.badge>
    </span>
</div>

<div x-data="{ show: true }">
    <span
        x-show="show"
        class="inline-flex items-center gap-1.5 rounded-pill bg-brand/10 px-2 py-0.5 text-xs font-medium text-brand"
    >
        Cabang Bandung
        <button type="button" class="rounded-full p-0.5" aria-label="Remove" x-on:click="show = false">×</button>
    </span>
</div>

Props API

Component props
Prop Type Default Description
variant solid|soft|outline soft Surface treatment for the badge.
color neutral|brand|success|warning|danger|info neutral Semantic color mapped through static class strings.
size sm|md md Badge density.
dot bool false Shows a leading status dot.
removable bool false Adds a Remove button. Pass x-on:click handlers to the badge to wire dismissal.

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • Badges are non-interactive by default and convey status visually plus text.
  • Removable badges expose a button with aria-label="Remove". Pair with visible text so color is not the only cue.
  • Status dots are decorative (aria-hidden) and should accompany a text label such as Lunas or Menunggu.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

WhatsApp: TODO Email the studio Visit Praesepe