LabelCard

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Code

<FlexWrapper direction="column" gap={16}>
  <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"
  />
</FlexWrapper>

API

LabelCard

Name	Type/Description
className	string | undefined
description	ReactNode
iconName = "signal"	string | undefined
sx	StyleProps | undefined
title	ReactNode
variant = "neutral"	"neutral" | "yellow" | "green" | "red" | "purple" | "blue" | undefined