Status

Code

import { Status } from "@fadymondy/nasaq/web";export function IssueStatus() {  return <Status tone="success">مكتملة</Status>;}

Data Display · stable

Live examples and controls: Status in the lab.

InstallCopy Anchor Link

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

Shows the state of a thing as a small icon followed by a label. There is no pill or background. Products map their own states onto five generic tones that are the same in every brand: neutral, info, warning, success, danger. Each tone has its own icon shape, so the status is readable for colour-blind users and where a brand colour is close to a status hue.

When to useCopy Anchor Link

• A status in a table cell, list row, header or detail view.
• Anywhere a chip would be too heavy.

When not to useCopy Anchor Link

• A status that needs its own chip or surface: use Badge with variant="success" etc.
• Categories, tags or identity ("Pro", "New"): use Badge (tag, brand, accent).
• Loading or work in progress: use Spinner or LoadingState.
• A status with no label: Status always needs children.

ImportCopy Anchor Link

import { Status, type StatusProps, type StatusTone } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

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

export function IssueStatus() {
  return <Status tone="success">مكتملة</Status>;
}

AnatomyCopy Anchor Link

Status                  data-slot="status", data-tone="<tone>"   <span>
├─ icon                 lucide icon, size-3.5, aria-hidden, tone colour
└─ label                <span class="truncate"> (children)

APICopy Anchor Link

StatusCopy Anchor Link

StatusProps extends ComponentProps<"span">. Remaining props go to the outer <span>.

StatusToneCopy Anchor Link

"neutral" | "info" | "success" | "warning" | "danger"

Default icons and meaning:

ExamplesCopy Anchor Link

Mapping product states onto tonesCopy Anchor Link

import { Status, type StatusTone } from "@fadymondy/nasaq/web";

const STATUS: Record<string, { tone: StatusTone; label: string }> = {
  todo: { tone: "neutral", label: "للتنفيذ" },
  progress: { tone: "info", label: "قيد التنفيذ" },
  review: { tone: "warning", label: "قيد المراجعة" },
  done: { tone: "success", label: "مكتملة" },
  blocked: { tone: "danger", label: "متوقفة" },
};

export function IssueStatus({ state }: { state: keyof typeof STATUS }) {
  const s = STATUS[state];
  return <Status tone={s.tone}>{s.label}</Status>;
}

Custom glyph and tinted labelCopy Anchor Link

import { Status } from "@fadymondy/nasaq/web";
import { CircleDashed } from "lucide-react";

export function Draft() {
  return (
    <Status tone="neutral" icon={CircleDashed} tinted>
      Draft
    </Status>
  );
}

AccessibilityCopy Anchor Link

• The icon is aria-hidden; the label is the accessible content. There is no role and no live region.
• The tone is not exposed to assistive tech by itself, so write labels that carry the meaning ("Blocked", not "Red").
• Meaning does not depend on colour: each tone has its own icon shape.
• A custom icon replaces the tone shape. Keep it visually distinct from the others in the same list.
• The label truncates. When children is a string it also gets a title tooltip with the full text; for non-string children give the column enough width.
• Localise the label yourself.

RTL & i18nCopy Anchor Link

• The icon sits on the inline start (right in RTL) through inline-flex and gap-1.5.
• The icons are not directional and are not mirrored.
• Numbers in labels ("3 blocked"): isolate with Num from the numeric component.
• No built-in strings.

Styling & tokensCopy Anchor Link

• Tone text tokens: text-muted-foreground (neutral), text-nq-info-text, text-nq-success-text, text-nq-warning-text, text-nq-danger-text.
• Target with [data-slot=status] or [data-tone=success].
• Extend with className. Do not remap tone colours with raw hex.

Do / Don'tCopy Anchor Link

• Do map product states onto the five tones so "failed" looks the same in every product.
• Do use Status in dense views and Badge where a chip is needed.
• Do keep custom icons distinct per state.
• Don't show a status without a label.
• Don't use tones for categories; those are Badge tags.
• Don't wrap Status in a container to fake a badge; use Badge.

RelatedCopy Anchor Link

• Badge · Table · Card · Spinner

LabCopy Anchor Link

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