content | string
number
React.ReactNode | (optional) Content of the component. |
children | React.ReactNode | (optional) Content to display the badge on top of. |
vertical | "top"
"bottom" | (optional) Vertical positioning of the component. Options: bottom | top. |
horizontal | "left"
"right" | (optional) Horizontal positioning of the component. Options: left | right. |
className | string | (optional) Custom className for the component. |
skeleton | boolean | (optional) Applies loading skeleton. |
variant | "information"
"notification"
"content" | (optional) Defines the visual appearance of the badge. There are two main variants notification and information. The content variant is just for placement purposes, and will require you to style the content all by yourself. Default variant is information. |
status | "default"
"success"
"warning"
"error"
"neutral" | (optional) Defines the status color of the "information" variant. Has no effect on other variants. Default is "default". |
subtle | boolean | (optional) Applies subtle style to "information" variant. Has no effect on other variants. Default is false. |
label | React.ReactNode | (optional) The label description of the badge. Only required when passing a number as the badge content. |
Space | string
object | (optional) Spacing properties like top or bottom are supported. |