Badge
A badge component.
Can be themed with Theme.Badge in Theme.
Component children#
| Key | Component | Condition | Align | Description |
|---|---|---|---|---|
| defaultCircle | styled(div) | Container of the badge |
Static Properties#
| Name | Type | Description |
|---|---|---|
| variants | "standard" | Object containing the component variants |
| Content | DynamicContentStore<Badge.BadgeChildrenProps, BadgeChildrenKeys> | Dynamic content store |
Component Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| programmable | boolean | Set to false to ignore | Yes | true |
| themeOverride | Partial<BadgeThemeProps> | Theme override | Yes | |
| position | BadgePosition | Position of the badge | Yes | |
| invisible | boolean | Set to true to prevent the badge from being rendered | Yes | false |
| max | number | Maximum badge value. If the content is greater than this property, a "+" will be displayed. | Yes | 9 |
| showZero | boolean | Set to true to hide the badge when its content is 0 | Yes | false |
| variant | BadgeVariants | Variants of the component. | Yes | BadgeVariants.standard |
| children | number | The numeric value to be displayed in the notification | No |
Component Children Properties#
| Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| invisible | boolean | Set to true to prevent the badge from being rendered | Yes | false |
| max | number | Maximum badge value. If the content is greater than this property, a "+" will be displayed. | Yes | 9 |
| showZero | boolean | Set to true to hide the badge when its content is 0 | Yes | false |
| variant | BadgeVariants | Variants of the component. | Yes | BadgeVariants.standard |
| children | number | The numeric value to be displayed in the notification | No |