Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip
ARC UI ARC Radiant Components
v4.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterContainerDashboard GridFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridDescription ListDiffGaugeJSON TreeKanbanLevel MeterListMeterSparklineStatStepperTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuHover CardLoading OverlayNotification PanelPopoverProgressSheetToastTooltip

Badge

Compact pill-shaped label for status indicators, category tags, and notification counts. Seven color variants let you encode meaning at a glance across dashboards, tables, and card layouts.

Components Badge
data static
<arc-badge>

Overview

Badge is a small, pill-shaped label designed to communicate status, category, or count at a glance. Its compact form factor makes it the right choice whenever you need to annotate another element — a table row, a card header, a sidebar item — without disrupting the surrounding layout or visual hierarchy. 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 — think "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 separated 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 entirely, for category colors that come from data rather than design tokens. **Badge and Tag are two chip faces, deliberately.** 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 — `v3.2.0` becoming `V3.2.0` in a taller box — which is a visual capability being deleted rather than consolidated. Use Badge for dense inline annotation and Tag for filter chips and categorical labels. Because Badge is a static content element with no interactive behavior, it renders as a simple `<span>` and carries no ARIA roles beyond its text content. This keeps the DOM lightweight and ensures badges inside table cells, list items, and cards don't introduce unexpected focus stops or interaction patterns.

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 — brevity is the whole point
  • 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 — switch to 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 — establish a color convention and apply it throughout the app

Features

  • Seven color variants (default, primary, secondary, success, warning, error, info) for semantic differentiation
  • Small rounded border radius (`--radius-sm`) for a compact, rectangular appearance
  • Monospace typography (`--font-mono`) at medium weight for technical readability
  • Subtle hover effect with border highlight or glow per variant
  • Lightweight inline-flex layout that flows naturally in text, tables, and flex containers
  • Transparent background with fine border for dark-theme harmony
  • No interactive ARIA roles — stays out of the tab order for clean accessibility

Preview

Default Primary Secondary Success Warning Error Info

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

color string ''
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
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy