@fvc/chip

@fvc/chip provides FE-VIS styled chip primitives on top of Ant Design. It wraps the antd Tag component, replaces the class prefix with fvc-chip, and delivers the Figma-exact design-system appearance: two sizes, an optional close action, and a disabled state.

Installation

bun add @fvc/chip

Peer Dependencies

bun add react antd

Import

import { Chip } from '@fvc/chip';

Quick Start

import { Chip } from '@fvc/chip';

export function FilterBar() {
  return <Chip size="medium">Active</Chip>;
}

Common Usage

Sizes

<Chip size="medium">Medium</Chip>
<Chip size="small">Small</Chip>

Closable

Set closable to render a close icon. Use onClose to react to the close action.

const [visible, setVisible] = useState(true);

{visible && (
  <Chip closable onClose={() => setVisible(false)}>
    Filter
  </Chip>
)}

Disabled

A disabled chip ignores clicks and hides the close icon.

<Chip disabled>Disabled</Chip>

Leading Icon

Use the icon prop to render a React node before the label text.

<Chip icon={<SomeIcon width={16} height={16} />}>With icon</Chip>

Forwarding Refs

The component forwards its ref to the underlying <span> element.

const ref = useRef<HTMLSpanElement>(null);
<Chip ref={ref}>Label</Chip>

Props

Chip accepts all Ant Design TagProps except color, bordered, and prefixCls, plus the additions below.

| Prop | Type | Default | Description | | ----------- | --------------------------- | ---------- | ----------------------------------------------------------------------- | | size | 'medium' \| 'small' | 'medium' | Visual size of the chip. | | disabled | boolean | false | Disables interaction and dims the chip. | | closable | boolean | — | Renders a close icon. Inherited from antd TagProps. | | onClose | (e: MouseEvent) => void | — | Called when the close icon is clicked. Inherited from antd TagProps. | | icon | ReactNode | — | Icon rendered before the label text. Inherited from antd TagProps. | | className | string | — | Additional class names merged onto the root element. | | testId | string | — | Maps to data-testid on the root element. |

CSS Classes

| Class | Applied when | | ---------------------- | ----------------------------------------------------------------- | | .fvc-chip | Always — the root <span> element. | | .fvc-chip-borderless | Always — chip is always rendered without a border. | | .fvc-chip-medium | When size="medium" (default). | | .fvc-chip-small | When size="small". | | .fvc-chip-disabled | When disabled={true}. | | .fvc-chip-close-icon | The close icon wrapper rendered by antd when closable={true}. |

Example override

.my-filter-bar .fvc-chip-close-icon {
  width: 20px;
  height: 20px;
}

CSS Custom Properties

Override these variables in your global stylesheet. All variables are declared on :root in src/styles/variables.scss.

Typography

| Variable | Default | | -------------------- | ---------------------- | | --chip-font-family | 'Roboto', sans-serif | | --chip-fz | 14px | | --chip-fw | 400 | | --chip-lh | 16px |

Layout

| Variable | Default | | ----------------------- | ------- | | --chip-px | 10px | | --chip-radius | 16px | | --chip-gap | 4px | | --chip-close-icon-size| 16px |

Sizes

| Variable | Default | | ------------------------ | ------- | | --chip-medium-size-py | 8px | | --chip-small-size-py | 4px |

Colours

| Variable | Default | | ------------------------ | ------------------------------------------- | | --chip-bg | var(--gray-150) | | --chip-fg | var(--body-text-color-1000) | | --chip-close-icon-fg | var(--gray-450) | | --chip-close-icon-hover-fg | var(--link-icon-color-500) | | --chip-disabled-fg | var(--blue-gray-600) | | --chip-disabled-bg | var(--gray-150) | | --chip-focus-ring-color| var(--blue-400) |

Global override example

// globals.scss
:root {
  --chip-font-family: 'Inter', sans-serif;
  --chip-bg: var(--neutral-200);
  --chip-fg: var(--neutral-900);
  --chip-radius: 4px;
  --chip-focus-ring-color: var(--brand-500);
}

Development

bun run lint
bun run type-check
bun run test
bun run build