Chip

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

Code

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

export function Example() {
  return <Chip icon="bell" text="Inventory alert" />;
}

Without icon

Code

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

export function Example() {
  return <Chip text="Confirmed" />;
}

Chip Types

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:gap-5">
      <Chip text="Draft" type="neutral" />
      <Chip text="Confirmed" type="success" />
      <Chip text="Blocked" type="error" />
      <Chip text="Needs review" type="warning" />
      <Chip text="Open filter" type="interactive" />
    </div>
  );
}

Chip Full Width And Default

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:w-100 tw:flex-col tw:gap-5 tw:border tw:p-2.5">
      <Chip fullWidth icon="bell" text="Confirmed order" type="success" />
      <Chip icon="bell" text="Blocked order" type="error" />
    </div>
  );
}

API

Chip

Props

className

className?: string

disabled

disabled?: boolean

fullWidth

fullWidth?: boolean

icon

icon?: string

onRemove

onRemove?: (() => void)

text

text: string

type

type?: "neutral" | "error" | "success" | "warning" | "interactive" = "neutral"