Label

Label renders a compact inline status label with semantic color variants.

Code

import { Label } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:gap-3">
      <Label text="Green Label" variant="green" />
      <Label text="Yellow Label" variant="yellow" />
      <Label text="Neutral Label" variant="neutral" />
      <Label text="Red Label" variant="red" />
      <Label text="Purple Label" variant="purple" />
      <Label text="Blue Label" variant="blue" />
    </div>
  );
}

API

Label

Props

className

className?: string

text

text: string

variant

variant?: "neutral" | "yellow" | "green" | "red" | "purple" | "blue" = "neutral"