LabelCard

LabelCard presents a compact status label with an icon, title, description, and semantic color variants.

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-4">
      <LabelCard
        description="Order is ready for fulfillment."
        iconName="sign"
        title="Confirmed"
        variant="green"
      />

      <LabelCard
        description="Inventory needs review."
        iconName="sign"
        title="Needs review"
        variant="yellow"
      />

      <LabelCard
        description="No action is required."
        iconName="sign"
        title="Archived"
        variant="neutral"
      />

      <LabelCard
        description="Order sync failed."
        iconName="sign"
        title="Blocked"
        variant="red"
      />

      <LabelCard
        description="Promotion applied."
        iconName="sign"
        title="Promotion"
        variant="purple"
      />

      <LabelCard
        description="Message sent to the account owner."
        iconName="sign"
        title="Notification sent"
        variant="blue"
      />
    </div>
  );
}

API

LabelCard

Props

className

className?: string

description

description?: React.ReactNode

iconName

iconName?: string = "signal"

sx

sx?: StyleProps

title

title: React.ReactNode

variant

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