Badge — ARC UI

Components

Badge

data

static

<arc-badge>

Overview

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

Use badges for long descriptions — switch to an Alert or Callout for multi-word messages
Rely on color alone to convey meaning; always include a text label alongside the color
Stack more than three or four badges in a single row — the density becomes unreadable
Use Badge as an interactive element; if users need to click it, use a Tag or Button instead
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;">
      <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>
  `,
})
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: 'Tektur', 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

Prop	Type	Default	Description
`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'.
`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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight