The vscode-badge component is used to highlight an item, attract attention, and/or flag status.
| ❌ Don't | ✅ Do |
|---|---|
 |
 |
| Don't use a badge to display text content. Use a vscode-tag component instead. | Use a badge to display numbers. |
| ❌ Don't | ✅ Do |
|---|---|
 |
 |
| Don't use a badge to indicate an error. | Use badges to indicate the numbered state of an element. |
| ❌ Don't | ✅ Do |
|---|---|
 |
 |
| Don't use more than one badge on a single element. | Ensure badges are clearly associated with their parent element. |
Interactive component examples
None
<vscode-badge>1</vscode-badge>