> ## 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.

# Count

> V2 Notification Count — a small badge for unread activity on nav items, icons, buttons, or chips.

```tsx theme={null}
import { Count } from "@fanvue/ui";
import type { CountProps, CountSize, CountVariant } from "@fanvue/ui";
```

## Examples

## Default

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

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

<Count value={5} />
```

## Custom Content

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

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

<Count>NEW</Count>
```

## Max Value

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

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

<Count value={150} max={99} />
```

## Multiple Variants

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

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

<div className="flex items-center gap-4">
  <Count value={5} variant="default" />
  <Count value={3} variant="alert" />
  <Count value={12} variant="brand" />
  <Count value={8} variant="pink" />
  <Count value={3} variant="info" />
  <Count value={7} variant="success" />
  <Count value={99} variant="warning" />
</div>
```

## Zero Value

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

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

<Count value={0} />
```

## Props

## Count

V2 Notification Count — a small badge for unread activity on nav items, icons, buttons, or chips. Truncates values above `max` (e.g. `"99+"`). Renders nothing when the value is `0` and no children are provided.

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

<ParamField path="max" type="number" default="99">
  Maximum value before showing overflow (e.g. `"99+"`).
</ParamField>

<ParamField path="showAmount" type="boolean" default="true">
  When `false`, renders an 8px unread dot instead of a numeric amount (Figma Show Amount=False).
</ParamField>

<ParamField path="size" type="&#x22;24&#x22; | &#x22;32&#x22; | &#x22;16&#x22;" default="32">
  Size of the count badge.
</ParamField>

<ParamField path="value" type="number" default="0">
  Numeric value to display. Renders nothing when `0` and no `children` are provided.
</ParamField>

<ParamField path="variant" 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="default">
  Colour variant of the count badge. Figma V2 types: `default` | `brand` | `contrast`.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `CountProps`, `CountSize`, `CountVariant`.

***

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