components/badge/index.en-US.md
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
<code src="./demo/basic.tsx">Basic</code> <code src="./demo/no-wrapper.tsx">Standalone</code> <code src="./demo/overflow.tsx">Overflow Count</code> <code src="./demo/dot.tsx">Red badge</code> <code src="./demo/change.tsx">Dynamic</code> <code src="./demo/link.tsx">Clickable</code> <code src="./demo/offset.tsx">Offset</code> <code src="./demo/size.tsx">Size</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/colorful.tsx">Colorful Badge</code> <code src="./demo/ribbon.tsx">Ribbon</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/ribbon-debug.tsx" debug>Ribbon Debug</code> <code src="./demo/mix.tsx" debug>Mixed usage</code> <code src="./demo/title.tsx" debug>Title</code> <code src="./demo/colorful-with-count-debug.tsx" debug>Colorful Badge support count Debug</code> <code src="./demo/component-token.tsx" debug>Component Token</code>
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| color | Customize Badge dot color | string | - | × | |
| count | Number to show in badge | ReactNode | - | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.7.0 | |
| dot | Whether to display a red dot instead of count | boolean | false | × | |
| offset | Set offset of the badge dot | [number, number] | - | × | |
| overflowCount | Max count to show | number | 99 | × | |
| showZero | Whether to show badge when count is zero | boolean | false | × | |
| size | If count is set, size sets the size of badge | medium | small | - | - | × |
| status | Set Badge as a status dot | success | processing | default | error | warning | - | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.7.0 | |
| text | If status is set, text sets the display text of the status dot | ReactNode | - | × | |
| title | Text to show when hovering over the badge | string | - | × |
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| color | Customize Ribbon color | string | - | × | |
| placement | The placement of the Ribbon, start and end follow text direction (RTL or LTR) | start | end | end | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| text | Content inside the Ribbon | ReactNode | - | × |
<code src="./demo/_semantic.tsx" simplify="true"></code>
<code src="./demo/_semantic_ribbon.tsx" simplify="true"></code>
<ComponentTokenTable component="Badge"></ComponentTokenTable>