Docs
Indicator
Indicator
The Indicator component is a small, customizable UI element typically used to display counts or statuses.
1000
Usage
Example Code
1import Indicator from "inc-design-system/indicator";Example Code
1<Indicator>Div with status</Indicator>Props
Indicator
| Prop | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Content to display inside the badge. There should be at least one child. | - |
| count | number | Number that shows the count of notifications. Default is 0. | 0 |
| dot | boolean | Boolean value to determine whether to show a dot UI instead of the count. Default is false. Order of precedence: Processing > Dot > Count | false |
| showZero | boolean | Boolean value to determine whether to display the number 0. Default is false. | false |
| overflowCount | number | The maximum number before displaying '99+'. Default is 99. | 99 |
| processing | boolean | Boolean value to determine whether to show a processing icon (lucide icon clock4). Default is false. | false |
| className | string | Styling for the parent div. | - |
| variant | "default" | "success" | "error" | "warning" | "info" | Variant of the badge determining its color. | default |