@fvc/badge

@fvc/badge provides a FE-VIS styled badge primitive on top of Ant Design Badge. It keeps the Ant Design Badge API familiar while applying the design-system success colour token and a custom CSS prefix.

Installation

bun add @fvc/badge

Peer Dependencies

bun add react antd

Import

import { Badge } from '@fvc/badge';

Quick Start

import { Badge } from '@fvc/badge';

export function StatusIndicator() {
  return <Badge status="success" text="Active" />;
}

Common Usage

Status Badge

<Badge status="success" text="Active" />

Count Badge

<Badge count={5}>
  <NotificationIcon />
</Badge>

Dot Badge

<Badge dot>
  <MessageIcon />
</Badge>

Zero Count

By default antd hides a zero count. Use showZero to display it.

<Badge count={0} showZero>
  <InboxIcon />
</Badge>

Props

| Prop | Type | Description | | --- | --- | --- | | status | 'success' | Status indicator variant. Currently only 'success' is supported. | | testId | string | Maps to data-testid. | | All BadgeProps | — | All Ant Design Badge props are supported (count, dot, showZero, overflowCount, offset, color, text, etc.) except text, prefixCls, scrollNumberPrefixCls, and status which are managed internally. |

Consumer Example

import { Badge } from '@fvc/badge';

export function RecordStatus({ isActive }: { isActive: boolean }) {
  if (!isActive) return null;

  return (
    <Badge
      status="success"
      text="Active"
      testId="record-status-badge"
    />
  );
}

Testing

<Badge status="success" text="Active" testId="status-badge" />

screen.getByTestId('status-badge');

Customisation

@fvc/badge exposes a CSS custom properties API. Override any of the variables below in your own stylesheet — no fork, no component re-bundle required.

/* consumer's app stylesheet */
:root {
  --badge-success-bg-color: #16a34a;
  --badge-success-count-color: #ffffff;
  --badge-count-border-radius: 4px;
}

Variable reference

| Variable | Default | Controls | | --- | --- | --- | | --badge-dot-size | 8px | Width and height of the status dot | | --badge-success-bg-color | var(--green-400) | Background colour of success dot and count badge | | --badge-success-count-color | var(--badge-active-color-100) | Text colour of the success count badge | | --badge-count-height | 16px | Height of the count badge pill | | --badge-count-border-radius | 20px | Corner radius of the count badge pill | | --badge-count-padding-x | 5px | Horizontal padding inside the count badge pill | | --badge-count-font-family | 'Montserrat', sans-serif | Typeface of the count badge label | | --badge-count-fz | 10px | Font size of the count badge label | | --badge-count-fw | 700 | Font weight of the count badge label | | --badge-count-lh | 100% | Line height of the count badge label | | --badge-count-letter-spacing | 0 | Letter spacing of the count badge label |

Development

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