Components

Badge

<Badge {...Badge.BadgeProps} />

A badge component. Can be themed with theme.Badge

Component children

These below are list of children
Key Condition Type Align Description
defaultCircle styled(div) Container of the badge

Members

DynamicContentStore.<Badge.BadgeChildrenProps>

# static readonly Content

Dynamic content store
"standard" | "dot" | "danger"

# static variants

Object containing the component variants
Properties:
Name Type Description
standard "standard" Standard version of the components: the badge will display a number passed as children with a few props modifications.
dot "dot" Simplified version of the component: the badge will simply be displayed a red circle.
danger "danger" Error version of the component: the badge will display an exclamation.

Type Definitions

# BadgeChildrenProps

Properties:
Name Type Attributes Default Description
invisible boolean <optional>
false Set to true to prevent the badge from being rendered
max number <optional>
9 Maximum badge value. If the content is greater than this property, a "+" will be displayed.
showZero boolean <optional>
false Set to true to hide the badge when its content is 0
variant Badge.variants <optional>
BadgeVariants.standard Variants of the component.
children number The numeric value to be displayed in the notification

# BadgePosition

Properties:
Name Type Attributes Description
top strring <optional>
Represents the top position
right string <optional>
Represents the right position
Badge.BadgeChildrenProps

# BadgeProps

Properties:
Name Type Attributes Default Description
programmable boolean <optional>
true Set to false to ignore `Badge.Content` customisations
position Badge.BadgePosition <optional>
Position of the badge