juxt.ui

Feedback

Badge

A compact label for status and counts.

DraftActivePendingFailedNew
Copy
<template>
  <JBadge>Draft</JBadge>
  <JBadge variant="success">Active</JBadge>
  <JBadge variant="warning">Pending</JBadge>
  <JBadge variant="destructive">Failed</JBadge>
  <JBadge variant="accent">New</JBadge>
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JBadge } from '@juxtui/ui'

Usage #

Copy
<JBadge variant="success" dot>Operational</JBadge>

accent is the only solid badge — reserve it for the one thing on screen that should pull the eye.

Variants & examples #

Status#

With dot, a badge drops its fill and becomes a state: text first, colour only in the marker.

OfflineOperationalDegradedOutage
Copy
<template>
  <JBadge dot>Offline</JBadge>
  <JBadge variant="success" dot>Operational</JBadge>
  <JBadge variant="warning" dot>Degraded</JBadge>
  <JBadge variant="destructive" dot>Outage</JBadge>
</template>

Sizes#

SmallMediumv0.1.012 files
Copy
<template>
  <JBadge size="sm" variant="success">Small</JBadge>
  <JBadge variant="success">Medium</JBadge>
  <JBadge size="sm">v0.1.0</JBadge>
  <JBadge>12 files</JBadge>
</template>

API #

Props

PropTypeDefault Description
variant'neutral' | 'success' | 'warning' | 'destructive' | 'accent''neutral'Meaning and colour.
size'sm' | 'md''md'Height: 17 or 20px.
dotbooleanfalseStatus style: plain text led by a small square marker, without a fill.

Slots

SlotProps Description
default—Label.
leading—Icon (ignored when dot is set).

Accessibility #

  • A badge is plain text in a <span>. Don’t rely on colour alone — the label should carry the meaning.
  • For counts that update live, wrap them in your own aria-live region.