> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chip

> A compact element for filters, tags, or toggleable actions.

```tsx theme={null}
import { Chip } from "@fanvue/ui";
import type { ChipProps, ChipSize, ChipVariant } from "@fanvue/ui";
```

## Examples

## Outlined

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-chip--outlined&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="420" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Chip — Outlined" />
</Frame>

```tsx theme={null}
import { Chip } from "@fanvue/ui";

<Chip outlined>Chip</Chip>
```

## Outlined Selected

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-chip--outlined-selected&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="420" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Chip — Outlined Selected" />
</Frame>

```tsx theme={null}
import { Chip } from "@fanvue/ui";

<Chip outlined selected>Chip</Chip>
```

## With Dot

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-chip--with-dot&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="420" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Chip — With Dot" />
</Frame>

```tsx theme={null}
import { Chip } from "@fanvue/ui";

<Chip leftDot>Chip</Chip>
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-chip--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="840" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Chip — All Variants" />
</Frame>

```tsx theme={null}
import { Fragment } from "react";
import { Chip } from "@fanvue/ui";
import type { ChipProps, ChipSize, ChipVariant } from "@fanvue/ui";

const STATE_COLUMNS = ["Default", "Active", "Disabled"] as const;

type StateColumn = (typeof STATE_COLUMNS)[number];

const MATRIX_ROWS: { label: string; size: ChipSize; dotted: boolean }[] = [
  { label: "40px", size: "40", dotted: false },
  { label: "32px", size: "32", dotted: false },
  { label: "40px · dotted", size: "40", dotted: true },
  { label: "32px · dotted", size: "32", dotted: true },
];

const stateProps = (state: StateColumn): Partial<ChipProps> => {
  switch (state) {
    case "Active":
      return { selected: true, onClick: () => {} };
    case "Disabled":
      return { disabled: true };
    default:
      return { onClick: () => {} };
  }
};

const VariantMatrix = ({ variant }: { variant: ChipVariant }) => (
  <div className="flex flex-col gap-3">
    <h3 className="typography-body-small-14px-semibold text-content-primary capitalize">
      {variant}
    </h3>
    <div className="grid grid-cols-[auto_repeat(3,minmax(0,1fr))] items-center gap-x-6 gap-y-4">
      <span />
      {STATE_COLUMNS.map((state) => (
        <span key={state} className="typography-description-12px-semibold text-content-tertiary">
          {state}
        </span>
      ))}
      {/* `dark` ignores `dotted`, so those rows would just repeat the solid ones. */}
      {MATRIX_ROWS.filter((row) => !(variant === "dark" && row.dotted)).map((row) => (
        <Fragment key={row.label}>
          <span className="typography-description-12px-semibold whitespace-nowrap text-content-tertiary">
            {row.label}
          </span>
          {STATE_COLUMNS.map((state) => (
            <span key={state} className="flex">
              <Chip variant={variant} size={row.size} dotted={row.dotted} {...stateProps(state)}>
                Chip
              </Chip>
            </span>
          ))}
        </Fragment>
      ))}
    </div>
  </div>
);

<div className="flex flex-col gap-8">
  <VariantMatrix variant="rounded" />
  <VariantMatrix variant="square" />
  <VariantMatrix variant="dark" />
</div>
```

## Rounded

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-chip--rounded&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="420" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Chip — Rounded" />
</Frame>

```tsx theme={null}
import { Chip } from "@fanvue/ui";

<Chip>Chip</Chip>
```

## Props

## Chip

A compact element for filters, tags, or toggleable actions. When an `onClick` handler is provided, the chip renders as an interactive `<button>` with `aria-pressed` support.

<ParamField path="asChild" type="boolean" default="false">
  Merge props onto a child element instead of rendering a wrapper.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Whether the chip is disabled.
</ParamField>

<ParamField path="dotted" type="boolean" default="false">
  Whether the chip uses a dashed border for add/create affordances. When `selected`, it becomes a subtle filled state with a solid border. Has no effect when `variant="dark"`.
</ParamField>

<ParamField path="leftDot" type="boolean" default="false">
  Whether to show a coloured status dot at the leading edge.
</ParamField>

<ParamField path="leftIcon" type="ReactNode">
  Icon element displayed before the label.
</ParamField>

<ParamField path="notificationCount" type="number">
  Numeric value for the notification badge. Uses the `Count` component for overflow formatting. Takes precedence over `notificationLabel` when both are provided.
</ParamField>

<ParamField path="notificationLabel" type="string">
  Notification badge content (e.g. `"99+"`). Passed as a string for i18n support.
</ParamField>

<ParamField path="notificationMax" type="number" default="99">
  Maximum value before the badge shows overflow (e.g. `"9+"`). Only applies when `notificationCount` is set.
</ParamField>

<ParamField path="notificationVariant" type="&#x22;alert&#x22; | &#x22;info&#x22; | &#x22;success&#x22; | &#x22;warning&#x22; | &#x22;default&#x22; | &#x22;brand&#x22; | &#x22;pink&#x22; | &#x22;contrast&#x22;" default="brand">
  Colour variant of the notification badge.
</ParamField>

<ParamField path="onClick" type="MouseEventHandler<HTMLElement>">
  Click handler — when provided, the chip renders as a `<button>` for accessibility.
</ParamField>

<ParamField path="outlined" type="boolean" default="false">
  Draws the unselected state as a 1px `buttons-chip-default` outline over a transparent background instead of filling with that same token. This is the Figma `V2 Insights Chips` treatment, used where chips sit over a chart and a row of solid fills would compete with the plotted series. The selected state is unaffected — it stays filled — as are the `dark` and `dotted` variants.
</ParamField>

<ParamField path="rightIcon" type="ReactNode">
  Icon element displayed after the label.
</ParamField>

<ParamField path="selected" type="boolean" default="false">
  Whether the chip is in a selected (pressed) state.
</ParamField>

<ParamField path="size" type="&#x22;32&#x22; | &#x22;40&#x22;" default="32">
  Height of the chip in pixels.
</ParamField>

<ParamField path="variant" type="&#x22;dark&#x22; | &#x22;square&#x22; | &#x22;rounded&#x22;" default="rounded">
  Visual variant of the chip.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `ChipProps`, `ChipSize`, `ChipVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)