Badge

Code

import { Badge } from "@fadymondy/nasaq/web";export function IssueState() {  return <Badge variant="warning">قيد المراجعة</Badge>;}

Data Display · stable

Live examples and controls: Badge in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/badge.json

A 20px high chip (h-5, 4px radius, caption text) rendered as a <span>. Its variant sets the colour role. Statuses use fixed hues shared by every brand. brand and accent are identity, not status. tag is for user-defined categories, with a hue chosen from nine.

When to useCopy Anchor Link

• A status that needs its own chip: success, warning, danger, info.
• A short count or label: "Pro" (brand), "New" (accent), a delta (outline).
• User-defined labels or categories: variant="tag" with a hue.

When not to useCopy Anchor Link

• An inline status in a table cell, list row or header, where a chip is too heavy: use Status. Its icon shape differs per tone, so it reads without colour.
• A status carried by colour alone: every badge needs a label. Prefer an icon as well.
• Tags used as status: the tag hues are categories, never state.
• A clickable control: a badge is not interactive. Use Button.

ImportCopy Anchor Link

import { Badge, badgeVariants, TAG_HUES, type BadgeProps, type TagHue } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Badge } from "@fadymondy/nasaq/web";

export function IssueState() {
  return <Badge variant="warning">قيد المراجعة</Badge>;
}

AnatomyCopy Anchor Link

Badge        data-slot="badge"    <span>, optional leading svg (12px) then text

APICopy Anchor Link

BadgeCopy Anchor Link

BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants>.

Variants (badgeVariants):

Other exportsCopy Anchor Link

ExamplesCopy Anchor Link

Statuses, with an iconCopy Anchor Link

import { Badge } from "@fadymondy/nasaq/web";
import { CircleCheck, CircleX } from "lucide-react";

export function Results() {
  return (
    <div className="flex gap-2">
      <Badge variant="success">
        <CircleCheck aria-hidden />
        مكتملة
      </Badge>
      <Badge variant="danger">
        <CircleX aria-hidden />
        متوقفة
      </Badge>
    </div>
  );
}

User tagsCopy Anchor Link

import { Badge, type TagHue } from "@fadymondy/nasaq/web";

export function Tags({ tags }: { tags: { name: string; hue: TagHue }[] }) {
  return (
    <div className="flex flex-wrap gap-1.5">
      {tags.map((t) => (
        <Badge key={t.name} variant="tag" hue={t.hue}>
          {t.name}
        </Badge>
      ))}
    </div>
  );
}

Every tag hueCopy Anchor Link

import { Badge, TAG_HUES } from "@fadymondy/nasaq/web";

export function AllHues() {
  return (
    <div className="flex flex-wrap gap-2">
      {TAG_HUES.map((hue) => (
        <Badge key={hue} variant="tag" hue={hue}>
          {hue}
        </Badge>
      ))}
    </div>
  );
}

Delta with an LTR figureCopy Anchor Link

import { Badge } from "@fadymondy/nasaq/web";
import { TrendingUp } from "lucide-react";

export function Delta() {
  return (
    <Badge variant="outline">
      <TrendingUp />
      <span dir="ltr">+12.4%</span>
    </Badge>
  );
}

Badge styling on another elementCopy Anchor Link

import { badgeVariants } from "@fadymondy/nasaq/web";

export function BadgeLink() {
  return (
    <a href="/pro" className={badgeVariants({ variant: "brand" })}>
      Pro
    </a>
  );
}

AccessibilityCopy Anchor Link

A badge is a static <span> with no role. It is not focusable.

• The label is the meaning. Never rely on hue alone; pair status with text and, where possible, an icon.
• Mark decorative icons inside a badge with aria-hidden.
• For a bare count with no visible unit ("3"), put an accessible name nearby or use aria-label.
• Localise the text yourself.

RTL & i18nCopy Anchor Link

• The badge is inline-flex with gap-1, so an icon before the text follows dir.
• Directional icons (arrows, chevrons) need mirroring in RTL. Trend and status icons do not.
• Keep numbers, percentages and signs LTR inside Arabic text: <span dir="ltr">+12.4%</span> or Num from the numeric component.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Status tokens: --nq-{success,warning,danger,info} with -soft and -text. Identity: --nq-brand, --nq-accent. Tags: --nq-tag-<hue> and --nq-tag-<hue>-soft.
• The status hues are fixed across brands. Do not remap them.
• Target with [data-slot=badge]. Extend with className; never override colours with raw hex.

Do / Don'tCopy Anchor Link

• Do use success / warning / danger / info for state, and always include a label.
• Do use brand for product identity and accent for featured/new, never as a status.
• Do use Status instead of a badge inside dense table cells and lists.
• Don't use tag hues to mean state.
• Don't invent a variant with raw hex; use the tokens.
• Don't make a badge clickable.

RelatedCopy Anchor Link

• Status · Table · Card · Avatar

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-badge--docs