Description of icon
Flex UI
API Reference

Badge

A badge component. Can be themed with Theme.Badge in Theme.


Component children#

KeyComponentConditionAlignDescription
defaultCirclestyled(div)
Container of the badge

Static Properties#

NameTypeDescription
variants"standard"

Object containing the component variants

ContentDynamicContentStore<Badge.BadgeChildrenProps>

Dynamic content store

Component Properties#

NameTypeDescriptionOptionalDefault
programmableboolean

Set to false to ignore Badge.Content customisations

Yestrue
themeOverridePartial<BadgeThemeProps>

Theme override

Yes
positionBadgePosition

Position of the badge

Yes

Component Children Properties#

NameTypeDescriptionOptionalDefault
invisibleboolean

Set to true to prevent the badge from being rendered

Yesfalse
maxnumber

Maximum badge value. If the content is greater than this property, a "+" will be displayed.

Yes9
showZeroboolean

Set to true to hide the badge when its content is 0

Yesfalse
variantBadgeVariants

Variants of the component.

YesBadgeVariants.standard
childrennumber

The numeric value to be displayed in the notification

No
Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.