Chip

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

Chip renders a compact pill for metadata, status, or filter-like selections, with optional icons, full-width layout, and status types.

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Chip icon="bell" text="Inventory alert" />
</div>

Chip Variant

Code

<FlexWrapper gap={20}>
  <FlexWrapper align="center" direction="column" gap={20}>
    <Chip text="Confirmed" />
  </FlexWrapper>
  <FlexWrapper align="center" direction="column" gap={20}>
    <Chip icon="bell" text="Inventory alert" />
  </FlexWrapper>
</FlexWrapper>

Chip Types

Code

<FlexWrapper gap={20}>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip text="Draft" type="neutral" />
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip text="Confirmed" type="success" />
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip text="Blocked" type="error" />
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip text="Needs review" type="warning" />
    </FlexWrapper>
  </div>
  <div>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip text="Open filter" type="interactive" />
    </FlexWrapper>
  </div>
</FlexWrapper>

Chip Full Width And Default

Code

<div style={{ border: "1px solid black", padding: "10px", width: "400px" }}>
  <FlexWrapper direction="column" gap={20}>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip fullWidth icon="bell" text="Confirmed order" type="success" />
    </FlexWrapper>
    <FlexWrapper align="center" direction="column" gap={20}>
      <Chip icon="bell" text="Blocked order" type="error" />
    </FlexWrapper>
  </FlexWrapper>
</div>

API

Chip

Name	Type/Description
className	string | undefined
disabled	boolean | undefined
fullWidth	boolean | undefined
icon	string | undefined
onRemove	(() => void) | undefined
text	string
type = "neutral"	"neutral" | "error" | "success" | "warning" | "interactive" | undefined