> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> A compact visual indicator. Often used to display status, notifications, or supplementary information with support for icons and animations.

## Examples

<Tabs>
  <Tab title="Basic Usage">
    <Frame caption="Simple badges with text content.">
      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_basic_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=61190744ba5ff0ce7f18ed75c86760c6" alt="Basic badge example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_basic_light.png" />

      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_basic_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=14d6889b8939623dc44b78d92ecb7420" alt="Basic badge example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_basic_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart Text Badge lines theme={null}
      NeoBadge(label: "BETA"),
      ```

      ```dart With Custom Color lines theme={null}
      NeoBadge(
        label: "NEW",
        color: theme.colors.fgSuccess,
      ),
      ```

      ```dart Danger Badge lines theme={null}
      NeoBadge(
        label: "URGENT",
        color: theme.colors.fgDanger,
      ),
      ```
    </CodeGroup>
  </Tab>

  <Tab title="With Icons">
    <Frame caption="Badges with icons for enhanced visual communication.">
      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_icons_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=da766d15a4cdec4f87ca7d8927fb7c7f" alt="Badge with icons example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_icons_light.png" />

      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_icons_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=2e06be5511102113450045988072bd4c" alt="Badge with icons example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_icons_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart With Icon lines theme={null}
      NeoBadge(
        label: "5 Days",
        icon: PhosphorIcons.flame,
        color: customPalette.orange,
      ),
      ```

      ```dart Rotating Icon lines theme={null}
      NeoBadge(
        label: "Syncing",
        icon: PhosphorIcons.spinner,
        isIconRotating: true,
        color: customPalette.purple,
      ),
      ```

      ```dart Status Badge lines theme={null}
      NeoBadge(
        label: "Completed",
        icon: PhosphorIcons.checkCircle,
        color: theme.colors.fgSuccess,
      ),
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Pill Style">
    <Frame caption="Fully rounded pill-style badges.">
      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_pill_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=f681fde8dfbc31ed79fe551cd4639a0b" alt="Pill badge example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_pill_light.png" />

      <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/utilities/badge/badge_pill_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=c4ff8fb5fa210cb64891e265038132a4" alt="Pill badge example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/utilities/badge/badge_pill_dark.png" />
    </Frame>

    <CodeGroup>
      ```dart Pill Badge lines theme={null}
      NeoBadge(
        label: "Pro",
        icon: PhosphorIcons.crown,
        isPill: true,
        color: customPalette.blue,
      ),
      ```

      ```dart Notification Count lines theme={null}
      NeoBadge(
        label: "38",
        isPill: true,
        color: theme.colors.fgDanger,
      ),
      ```

      ```dart Feature Badge lines theme={null}
      NeoBadge(
        label: "Premium",
        icon: PhosphorIcons.crown,
        isPill: true,
        color: customPalette.yellow,
      ),
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Properties

### Required

<ParamField path="label" type="String" required>
  The text content of the badge.
</ParamField>

### Content

<ParamField path="icon" type="PhosphorIconData Function(PhosphorIconsStyle)">
  An optional icon to display before the label. Use `PhosphorIcons.yourIconName`.
</ParamField>

<ParamField path="isIconRotating" type="bool" default="false">
  Whether the icon should continuously rotate. Useful for loading states or activity indicators.
</ParamField>

### Styling

<ParamField path="color" type="Color" default="theme.colors.fgSecondary">
  The color of the badge. This affects the label, icon, and background colors.
</ParamField>

<ParamField path="isPill" type="bool" default="false">
  Whether to use fully rounded corners (pill style) instead of the default small border radius.
</ParamField>

<ParamField path="isIndicator" type="bool" default="false">
  Whether to display as a minimal indicator dot instead of showing label and icons. When true, only a small colored circle is shown.
</ParamField>

## Best Practices

* Use `isIndicator: true` for subtle status indicators where the context is clear.
* Combine icons like `PhosphorIcons.spinner` or `PhosphorIcons.circleNotch` with `isIconRotating: true` for loading or syncing states.

## Integration Notes

* NeoBadge smoothly morphs between label/icon display and indicator dot when `isIndicator` changes.