Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Badge
Designer doc
A wrapper component to display badge on top of its child element.
Example
Basic Usage
View code
Animation
If Badge content is a number, it increases or decreases, they are smoothly animated even when the digits change.
View code
BadgeCount showZero and overflow
View code
More Examples
View code
API Design Considerations
Contrary to Ant Design and Material-UI’s Badge, this Badge does not merge all props related to number, string, or custom.
As an example: what do you think will happen when showZero is true while the content is not a number? This may be the problem with Ant Design and Material-UI Badge API.
This can be solved by exposing the BadgeCount component, you can pass any count/number specific props to it. On the other hand, if you just want to use the default option, Badge will check the type of the content: number will automatically be wrapped with BadgeCount. Similarly for string - it will be wrapped with BadgeCapsule; and custom elements will be rendered as it is e.g. Avatar.
Accessibility
Using Screen Reader, BadgeCount has label “pending messages -count-”. You can provide context prop to change it, or manually provide aria-label.
References
- Ant Design: https://ant.design/components/badge/#components-badge-demo-change
- Material-UI: https://material-ui.com/components/badges/
- Angular Material: https://material.angular.io/components/badge/overview
API
Badge
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| content | ReactNode | ||
| offset | number | 0 | |
| position | BadgePositions | top-right |
BadgeCapsule
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| multipleChars | boolean | ||
| style | any | ||
| visible | boolean | true |
BadgeCount
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| label | string | pending messages | |
| overflow | number | ||
| showZero | boolean | ||
| value | number |