Badge

Displays a badge or a component that looks like a badge.

Code

import { Badge } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:w-full tw:flex-wrap tw:justify-center tw:gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Variants

Use the variant prop to change the variant of the badge.

Status variants are named for what they mean rather than the color they render, so a badge keeps reading correctly when the palette changes. Reach for destructive when something failed or is blocked, attention when it awaits action, success when it completed, info for supporting detail that carries no outcome, and highlight to set an item apart without ranking it good or bad. Use secondary for a status that is genuinely neutral. The color itself is invisible to assistive technology and to anyone who cannot distinguish it, so the badge’s text has to name the status.

Code

import { Badge } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="attention">Attention</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="highlight">Highlight</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  );
}

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

Code

import { Badge, BadgeCheckIcon, BookmarkIcon } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Badge variant="secondary">
        <BadgeCheckIcon data-icon="inline-start" />
        Verified
      </Badge>
      <Badge variant="outline">
        Bookmark
        <BookmarkIcon data-icon="inline-end" />
      </Badge>
    </div>
  );
}

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

Code

import { Badge, Spinner } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:gap-2">
      <Badge variant="destructive">
        <Spinner data-icon="inline-start" />
        Deleting
      </Badge>
      <Badge variant="secondary">
        Generating
        <Spinner data-icon="inline-end" />
      </Badge>
    </div>
  );
}

Link

Use the render prop to render a link as a badge.

Code

import { ArrowUpRightIcon, Badge } from "@falcon/ui-kit";

export function Example() {
  return (
    <Badge render={<a href="#link" />}>
      Open Link <ArrowUpRightIcon data-icon="inline-end" />
    </Badge>
  );
}

API

Badge

Renders a <span> element by default and accepts standard <span> props. Use render to replace the element.

Props

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

variant

variant?: "outline" | "success" | "info" | "link" | "secondary" | "default" | "ghost" | "destructive" | "attention" | "highlight" | null = "default"

Controls the badge’s appearance only, never its behavior. The link variant looks like a link without rendering one, and status variants such as success carry no accessible semantics, so the badge’s text has to convey the meaning on its own.