Visual Studio Code Badge

November 30, 2023 · View on GitHub

The vscode-badge component is used to highlight an item, attract attention, and/or flag status.

Badge hero

Usage

❌ Don't✅ Do
Badge with text valueBadge with number value
Don't use a badge to display text content. Use a vscode-tag component instead.Use a badge to display numbers.
❌ Don't✅ Do
Badge used to display and errorBadge showing the number of items in a history view
Don't use a badge to indicate an error.Use badges to indicate the numbered state of an element.
❌ Don't✅ Do
Multiple badges on one elementOne badge used for each section in a view
Don't use more than one badge on a single element.Ensure badges are clearly associated with their parent element.

Implementation

Interactive component examples

Attributes

None

Basic Badge

<vscode-badge>1</vscode-badge>