SourceBadge

Code

import { SourceBadge } from "@fadymondy/nasaq/web";import { Database, Rss } from "lucide-react";export function Sources() {  return (    <div className="flex gap-2">      <SourceBadge label="Postgres" icon={Database} />      <SourceBadge label="Blog feed" icon={Rss} color="var(--nq-accent-brand)" />      <SourceBadge compact label="Postgres" icon={Database} />    </div>  );}

Data Display · beta

Live examples and controls: SourceBadge in the lab.

InstallCopy Anchor Link

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

A chip that says where something came from: "GitHub", "Google Drive", "RSS". The icon can carry the source's brand colour; the label stays in text colour.

When to useCopy Anchor Link

• Rows, search results and cards that mix records from several sources.
• Imported items, so people know which system owns them.

When not to useCopy Anchor Link

• A state ("Paid", "Failed"): use Badge or Status.
• A person: use Avatar.

ImportCopy Anchor Link

import { SourceBadge } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { SourceBadge } from "@fadymondy/nasaq/web";
import { Database, Rss } from "lucide-react";

export function Sources() {
  return (
    <div className="flex gap-2">
      <SourceBadge label="Postgres" icon={Database} />
      <SourceBadge label="Blog feed" icon={Rss} color="var(--nq-accent-brand)" />
      <SourceBadge compact label="Postgres" icon={Database} />
    </div>
  );
}

AnatomyCopy Anchor Link

SourceBadge                     data-slot="source-badge"  (span, or a when href is set)
├─ icon                         data-slot="source-badge-icon", coloured by `color`
└─ label                        hidden when compact

APICopy Anchor Link

SourceBadge: every span prop except children, plus:

AccessibilityCopy Anchor Link

• Compact badges are role="img" with the label as aria-label and title.
• With href, it is a real link with a focus ring and rel="noopener noreferrer".
• The icon is decorative; the label carries the meaning, so colour is never the only cue.

RTL & i18nCopy Anchor Link

• Icon at the inline start; the chip mirrors with the layout. Pass a localised label.

Styling & tokensCopy Anchor Link

• bg-secondary, border-border, rounded-control, text-caption / text-label. Target [data-slot="source-badge"].

Do / Don'tCopy Anchor Link

• Do keep the label short: the product name, not "Imported from…".
• Don't colour the label; brand colours rarely have enough contrast as text.

RelatedCopy Anchor Link

• Badge
• Status
• Avatar

LabCopy Anchor Link

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