2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tcf8,import { X } from "lucide-react"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; const TONES = { neutral: { soft: "bg-neutral-100 text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200", solid: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950", outline: "text-neutral-700 ring-black/[0.12] dark:text-neutral-200 dark:ring-white/[0.16]", dot: "bg-neutral-400", }, blue: { soft: "bg-blue-50 text-blue-700 dark:bg-blue-500/12 dark:text-blue-300", solid: "bg-blue-600 text-white", outline: "text-blue-700 ring-blue-600/25 dark:text-blue-300 dark:ring-blue-400/30", dot: "bg-blue-500", }, emerald: { soft: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/12 dark:text-emerald-300", solid: "bg-emerald-600 text-white", outline: "text-emerald-700 ring-emerald-600/25 dark:text-emerald-300 dark:ring-emerald-400/30", dot: "bg-emerald-500", }, amber: { soft: "bg-amber-50 text-amber-800 dark:bg-amber-400/12 dark:text-amber-300", solid: "bg-amber-400 text-amber-950", outline: "text-amber-700 ring-amber-600/30 dark:text-amber-300 dark:ring-amber-300/30", dot: "bg-amber-400", }, red: { soft: "bg-red-50 text-red-700 dark:bg-red-500/12 dark:text-red-300", solid: "bg-red-600 text-white", outline: "text-red-700 ring-red-600/25 dark:text-red-300 dark:ring-red-400/30", dot: "bg-red-500", }, } as const; const SIZES = { sm: "h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3", md: "h-6 gap-1.5 px-2 text-[12px] [&_svg]:size-3.5", lg: "h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5", } as const; export type BadgeTone = keyof typeof TONES; export interface BadgeProps extends ComponentProps<"span"> { tone?: BadgeTone; /** soft: tinted (default) · solid: filled · outline: a ring only. */ variant?: "soft" | "solid" | "outline"; size?: keyof typeof SIZES; /** pill (default) or rounded corners. */ shape?: "pill" | "rounded"; /** A small status dot before the label. */ dot?: boolean; /** Shows a remove button after the label. */ onRemove?: () => void; } export function Badge({ tone = "neutral", variant = "soft", size = "md", shape = "pill", dot = false, onRemove, className, children, ...props }: BadgeProps) { const t = TONES[tone]; return ( {dot && } {children} {onRemove && ( )} ); } export default Badge; 2e:T65ee,

import { X } from "lucide-react";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const TONES = {
  neutral: {
    soft: "bg-neutral-100 text-neutral-700 dark:bg-white/[0.08] dark:text-neutral-200",
    solid: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950",
    outline: "text-neutral-700 ring-black/[0.12] dark:text-neutral-200 dark:ring-white/[0.16]",
    dot: "bg-neutral-400",
  },
  blue: {
    soft: "bg-blue-50 text-blue-700 dark:bg-blue-500/12 dark:text-blue-300",
    solid: "bg-blue-600 text-white",
    outline: "text-blue-700 ring-blue-600/25 dark:text-blue-300 dark:ring-blue-400/30",
    dot: "bg-blue-500",
  },
  emerald: {
    soft: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/12 dark:text-emerald-300",
    solid: "bg-emerald-600 text-white",
    outline: "text-emerald-700 ring-emerald-600/25 dark:text-emerald-300 dark:ring-emerald-400/30",
    dot: "bg-emerald-500",
  },
  amber: {
    soft: "bg-amber-50 text-amber-800 dark:bg-amber-400/12 dark:text-amber-300",
    solid: "bg-amber-400 text-amber-950",
    outline: "text-amber-700 ring-amber-600/30 dark:text-amber-300 dark:ring-amber-300/30",
    dot: "bg-amber-400",
  },
  red: {
    soft: "bg-red-50 text-red-700 dark:bg-red-500/12 dark:text-red-300",
    solid: "bg-red-600 text-white",
    outline: "text-red-700 ring-red-600/25 dark:text-red-300 dark:ring-red-400/30",
    dot: "bg-red-500",
  },
} as const;

const SIZES = {
  sm: "h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3",
  md: "h-6 gap-1.5 px-2 text-[12px] [&_svg]:size-3.5",
  lg: "h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5",
} as const;

export type BadgeTone = keyof typeof TONES;

export interface BadgeProps extends ComponentProps<"span"> {
  tone?: BadgeTone;
  /** soft: tinted (default) · solid: filled · outline: a ring only. */
  variant?: "soft" | "solid" | "outline";
  size?: keyof typeof SIZES;
  /** pill (default) or rounded corners. */
  shape?: "pill" | "rounded";
  /** A small status dot before the label. */
  dot?: boolean;
  /** Shows a remove button after the label. */
  onRemove?: () => void;
}

export function Badge({ tone = "neutral", variant = "soft", size = "md", shape = "pill", dot = false, onRemove, className, children, ...props }: BadgeProps) {
  const t = TONES[tone];
  return (
    <span
      className={cn(
        "inline-flex w-fit shrink-0 items-center whitespace-nowrap font-medium leading-none tabular-nums",
        variant === "outline" ? cn("ring-1 ring-inset", t.outline) : t[variant],
        shape === "pill" ? "rounded-full" : "rounded-md",
        SIZES[size],
        onRemove && "pr-0.5",
        className,
      )}
      {...props}
    >
      {dot && <span aria-hidden className={cn("size-1.5 shrink-0 rounded-full", variant === "solid" ? "bg-current opacity-70" : t.dot)} />}
      {children}
      {onRemove && (
        <button
          type="button"
          onClick={onRemove}
          aria-label="Remove"
          className="flex aspect-square h-[calc(100%-4px)] items-center justify-center rounded-full opacity-60 outline-none transition-[opacity,background-color] hover:bg-current/10 hover:opacity-100 focus-visible:opacity-100"
        >
          <X className="size-3!" />
        </button>
      )}
    </span>
  );
}

export default Badge;

2f:T22c7,

import { Badge } from "@/components/scalar-ui/badge";

const rows = [
  { name: "aurora-web", status: "Ready", tone: "emerald" },
  { name: "aurora-api", status: "Building", tone: "amber" },
  { name: "aurora-docs", status: "Failed", tone: "red" },
  { name: "marketing", status: "Queued", tone: "neutral" },
] as const;

export default function Demo() {
  return (
    <div className="w-full max-w-[360px] divide-y divide-black/[0.06] rounded-[22px] bg-white px-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:divide-white/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      {rows.map((r) => (
        <div key={r.name} className="flex items-center justify-between py-3.5">
          <span className="text-[13.5px] font-medium text-neutral-950 dark:text-white">{r.name}</span>
          <Badge tone={r.tone} dot>
            {r.status}
          </Badge>
        </div>
      ))}
    </div>
  );
}

30:T10e6,

import { Badge } from "@/components/scalar-ui/badge";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge>Soft</Badge>
      <Badge variant="solid">Solid</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge shape="rounded">Rounded</Badge>
    </div>
  );
}

31:T20ea,

import { Badge } from "@/components/scalar-ui/badge";

const tones = ["neutral", "blue", "emerald", "amber", "red"] as const;

export default function Example() {
  return (
    <div className="grid gap-3">
      {(["soft", "solid", "outline"] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center justify-center gap-2">
          {tones.map((tone) => (
            <Badge key={tone} tone={tone} variant={variant} className="capitalize">
              {tone}
            </Badge>
          ))}
        </div>
      ))}
    </div>
  );
}

32:T161c,

import { Badge } from "@/components/scalar-ui/badge";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge tone="emerald" dot>Online</Badge>
      <Badge tone="amber" dot>Away</Badge>
      <Badge tone="red" dot>Busy</Badge>
      <Badge dot variant="outline">Offline</Badge>
      <Badge tone="emerald" dot variant="solid">Live</Badge>
    </div>
  );
}

33:T1965,

import { BadgeCheck, Clock, GitBranch, Lock } from "lucide-react";
import { Badge } from "@/components/scalar-ui/badge";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge tone="blue">
        <BadgeCheck />
        Verified
      </Badge>
      <Badge>
        <GitBranch />
        main
      </Badge>
      <Badge tone="amber">
        <Clock />
        Expires in 3 days
      </Badge>
      <Badge variant="outline">
        <Lock />
        Private
      </Badge>
    </div>
  );
}

34:T291a,

"use client";

import { useState } from "react";
import { Badge } from "@/components/scalar-ui/badge";

const initial = ["design", "frontend", "billing", "good first issue"];

export default function Example() {
  const [tags, setTags] = useState(initial);
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex min-h-6 flex-wrap justify-center gap-2">
        {tags.map((t) => (
          <Badge key={t} onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
            {t}
          </Badge>
        ))}
      </div>
      {tags.length < initial.length && (
        <button type="button" onClick={() => setTags(initial)} className="text-[12.5px] font-medium text-neutral-500 underline-offset-4 hover:text-neutral-950 hover:underline dark:hover:text-white">
          Reset
        </button>
      )}
    </div>
  );
}

35:T452,import { Bell, Inbox, MessageSquare } from "lucide-react"; import { Badge } from "@/components/scalar-ui/badge"; const items = [ { icon: Inbox, label: "Inbox", count: 12 }, { icon: MessageSquare, label: "Messages", count: 3 }, { icon: Bell, label: "Alerts", count: 128 }, ]; export default function Example() { return (

{items.map(({ icon: Icon, label, count }) => ( ))}

); } 36:T2729,

import { Bell, Inbox, MessageSquare } from "lucide-react";
import { Badge } from "@/components/scalar-ui/badge";

const items = [
  { icon: Inbox, label: "Inbox", count: 12 },
  { icon: MessageSquare, label: "Messages", count: 3 },
  { icon: Bell, label: "Alerts", count: 128 },
];

export default function Example() {
  return (
    <div className="flex items-center gap-5">
      {items.map(({ icon: Icon, label, count }) => (
        <button
          key={label}
          type="button"
          aria-label={`${label}, ${count} unread`}
          className="relative flex size-10 items-center justify-center rounded-xl text-neutral-600 ring-1 ring-inset ring-black/[0.08] transition-colors hover:bg-neutral-50 dark:text-neutral-300 dark:ring-white/[0.12] dark:hover:bg-white/[0.04]"
        >
          <Icon className="size-[18px]" />
          <Badge tone="red" variant="solid" size="sm" className="absolute -right-1.5 -top-1.5 min-w-5 justify-center ring-2 ring-white dark:ring-neutral-950">
            {count > 99 ? "99+" : count}
          </Badge>
        </button>
      ))}
    </div>
  );
}

37:T10d2,

import { Badge } from "@/components/scalar-ui/badge";

export default function Example() {
  return (
    <div className="flex items-center gap-2">
      <Badge size="sm" tone="blue">Small</Badge>
      <Badge tone="blue">Medium</Badge>
      <Badge size="lg" tone="blue">Large</Badge>
    </div>
  );
}

29:["$","section","badge",{"id":"badge","aria-labelledby":"badge-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"badge-title","className":"sr-only","children":"Badge"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"badge","gated":{"unlocked":true,"files":[{"name":"badge.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"import { Badge } from \"@/components/scalar-ui/badge\";\n\nconst rows = [\n { name: \"aurora-web\", status: \"Ready\", tone: \"emerald\" },\n { name: \"aurora-api\", status: \"Building\", tone: \"amber\" },\n { name: \"aurora-docs\", status: \"Failed\", tone: \"red\" },\n { name: \"marketing\", status: \"Queued\", tone: \"neutral\" },\n] as const;\n\nexport default function Demo() {\n return (\n

\n {rows.map((r) => (\n

\n {r.name}\n \n {r.status}\n \n

\n ))}\n

\n );\n}\n","html":"$2f"}],"examples":{"variants":{"name":"variants.tsx","code":"import { Badge } from \"@/components/scalar-ui/badge\";\n\nexport default function Example() {\n return (\n

\n Soft\n Solid\n Outline\n Rounded\n

\n );\n}\n","html":"$30"},"tones":{"name":"tones.tsx","code":"import { Badge } from \"@/components/scalar-ui/badge\";\n\nconst tones = [\"neutral\", \"blue\", \"emerald\", \"amber\", \"red\"] as const;\n\nexport default function Example() {\n return (\n

\n {([\"soft\", \"solid\", \"outline\"] as const).map((variant) => (\n

\n {tones.map((tone) => (\n \n {tone}\n \n ))}\n

\n ))}\n

\n );\n}\n","html":"$31"},"with-dot":{"name":"with-dot.tsx","code":"import { Badge } from \"@/components/scalar-ui/badge\";\n\nexport default function Example() {\n return (\n

\n Online\n Away\n Busy\n Offline\n Live\n

\n );\n}\n","html":"$32"},"with-icon":{"name":"with-icon.tsx","code":"import { BadgeCheck, Clock, GitBranch, Lock } from \"lucide-react\";\nimport { Badge } from \"@/components/scalar-ui/badge\";\n\nexport default function Example() {\n return (\n

\n \n \n Verified\n \n \n \n main\n \n \n \n Expires in 3 days\n \n \n \n Private\n \n

\n );\n}\n","html":"$33"},"removable":{"name":"removable.tsx","code":"\"use client\";\n\nimport { useState } from \"react\";\nimport { Badge } from \"@/components/scalar-ui/badge\";\n\nconst initial = [\"design\", \"frontend\", \"billing\", \"good first issue\"];\n\nexport default function Example() {\n const [tags, setTags] = useState(initial);\n return (\n

\n {tags.map((t) => (\n setTags((all) => all.filter((x) => x !== t))}>\n {t}\n \n ))}\n

\n {tags.length < initial.length && (\n \n )}\n

\n );\n}\n","html":"$34"},"count":{"name":"count.tsx","code":"$35","html":"$36"},"size":{"name":"size.tsx","code":"import { Badge } from \"@/components/scalar-ui/badge\";\n\nexport default function Example() {\n return (\n

\n Small\n Medium\n Large\n

\n );\n}\n","html":"$37"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add badge","shadcn":"npx shadcn@latest add https://scalarui.com/r/badge.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L38","toolbar":"$L39"}]}],["$L3a","$L3b","$L3c","$L3d","$L3e","$L3f","$L40"]]}]

Badges

Badges

Variants

Tones

With Dot

With Icon

Removable

Count

Size