Badge
Compact pill-shaped label for status indicators, category tags, and notification counts. Seven color variants encode meaning across dashboards, tables, and card layouts.
<arc-badge>Overview
Badge is a small, pill-shaped label designed to communicate status, category, or count at a glance. Its small size suits annotating another element (a table row, a card header, a sidebar item) without disrupting the surrounding layout.
The seven color variants split into two groups. Three are neutral lanes for labels that categorise rather than report: default (neutral gray) for general-purpose labels like categories or metadata; primary for an active or informational state such as "In Progress", "New", or a notification count; and secondary for a distinct or highlighted category such as "Featured", "Beta", or "Archived", a third lane that stays visually separate from the other two.
Four are the library's status set (success, warning, error and info), mapping to the semantic color tokens, so a badge reporting a state matches an Alert or a Tag reporting the same one. Reach for these when the badge is a status rather than a label: a build result, a health indicator, a severity. info is the newest of them and exists so every status set in the library has the same four members. If none of the seven fit, the color prop takes an RGB triplet and overrides the variant, for category colors that come from data rather than design tokens.
Badge and Tag are two chip faces. Badge is monospace, sentence case, and compact; Tag is the label face, uppercase with 2px tracking and a touch-sized minimum height. They were slated to merge in v4 and did not. Merging would have re-set every badge on every page in an uppercase label face, with v3.2.0 becoming V3.2.0 in a taller box, and a visual capability would have been lost. Use Badge for dense inline annotation and Tag for filter chips and categorical labels.
Badge is a static content element, so it renders as a <span> and carries no ARIA roles beyond its text content. Badges inside table cells, list items, and cards add no focus stops.
Guidelines
When to use
- Use default (gray) for neutral metadata like categories, tags, or counts
- Use primary for active or informational states like "In Progress" or "New"
- Use secondary to distinguish a separate category such as "Archived", "Beta", or "Featured"
- Keep badge labels to one or two words
- Place badges inline next to the element they annotate (heading, table cell, nav item)
- Combine multiple badge variants in a row to show compound status (e.g. category + state)
When not to use
- Do not use badges for long descriptions. Use an Alert for multi-word messages
- Do not rely on color alone to convey meaning; always include a text label alongside the color
- Do not stack more than three or four badges in a single row; the density becomes unreadable
- Do not use Badge as an interactive element; if users need to click it, use a Tag or Button instead
- Do not mix badge variants inconsistently. Set a color convention and apply it throughout the app
Features
- Seven color variants (default, primary, secondary, success, warning, error, info)
- Small border radius (`--radius-sm`) for a compact, rectangular shape
- Monospace typography (`--font-mono`) at medium weight for technical readability
- Hover effect with a border highlight or glow per variant
- Inline-flex layout that flows in text, tables, and flex containers
- Transparent background with fine border for dark-theme harmony
- No interactive ARIA roles, so it stays out of the tab order
Preview
Usage
<script type="module" src="@arclux/arc-ui"></script>
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<arc-badge>Default</arc-badge>
<arc-badge variant="primary">Primary</arc-badge>
<arc-badge variant="secondary">Secondary</arc-badge>
<arc-badge variant="success">Deployed</arc-badge>
<arc-badge variant="warning">Pending</arc-badge>
<arc-badge variant="error">Failed</arc-badge>
<arc-badge variant="info">New</arc-badge>
</div>
<!-- Custom color -->
<arc-badge color="255, 165, 0">Custom</arc-badge>import { Badge } from '@arclux/arc-ui-react';
export function ProjectStatus() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Deployed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>
</div>
);
}<script setup>
import { Badge } from '@arclux/arc-ui-vue';
</script>
<template>
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Deployed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>
</div>
</template><script>
import { Badge } from '@arclux/arc-ui-svelte';
</script>
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Deployed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>
</div>import { Component } from '@angular/core';
import { Badge } from '@arclux/arc-ui-angular';
@Component({
imports: [Badge],
template: `
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<arc-badge>Default</arc-badge>
<arc-badge variant="primary">Primary</arc-badge>
<arc-badge variant="secondary">Secondary</arc-badge>
<arc-badge variant="success">Deployed</arc-badge>
<arc-badge variant="warning">Pending</arc-badge>
<arc-badge variant="error">Failed</arc-badge>
<arc-badge variant="info">New</arc-badge>
</div>
`,
})
export class ProjectStatusComponent {}import { Badge } from '@arclux/arc-ui-solid';
export function ProjectStatus() {
return (
<div style={{ display: 'flex', 'align-items': 'center', gap: '12px', 'flex-wrap': 'wrap' }}>
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Deployed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>
</div>
);
}import { Badge } from '@arclux/arc-ui-preact';
export function ProjectStatus() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Deployed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>
</div>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-badge — requires badge.css + base.css (or arc-ui.css) -->
<span class="arc-badge">
<span class="badge">Badge</span>
</span><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-badge — self-contained, no external CSS needed -->
<style>
.arc-badge:hover .badge { border-color: rgb(51, 51, 64); }
.arc-badge[data-variant="primary"]:hover .badge { box-shadow: 0 0 12px rgba(77, 126, 247, 0.15); }
.arc-badge[data-variant="secondary"]:hover .badge { box-shadow: 0 0 12px rgba(139, 92, 246, 0.15); }
</style>
<span class="arc-badge" style="display: inline-flex">
<span class="badge" style="display: inline-flex; align-items: center; gap: 8px; font-family: 'Tomorrow', system-ui, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: rgb(124, 124, 137); padding: 6px 16px; border: 1px solid rgb(34, 34, 41); border-radius: 100px; background: rgba(255, 255, 255, 0.03)">Badge</span>
</span>API
colorstring''- Custom RGB color value (e.g.
"255, 100, 50") that overrides the variant color. Sets the border, text, background tint, and hover glow to the specified color. variant'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info''default'- Controls the badge color scheme. Default renders a neutral gray. Primary and secondary use the accent token colors. Success, warning, error, and info map to the corresponding semantic color tokens for status-oriented labels.
size'sm' | 'md' | 'lg''md'- Controls the badge size. Options: 'sm', 'md', 'lg'.
See Also
- TagCompact pill-shaped label with color variants, custom color support, and an optional remove button, for categorisation, filtering, and selection feedback.
- ChipA toggleable pill-shaped element for filters, tags, or multi-select options, with a selected state highlighted in accent-primary.
- AvatarUser avatar with image or initials fallback.