Bootstrap 5 Badges Component: Concise Labels and Status Indicators

The badge component in Bootstrap 5 is a practical utility for identifying content status, categories, or prompts in web design. It is compact, has unified styling, and supports multiple colors and sizes. To use it, you first need to include Bootstrap 5 CSS. The basic usage is `<span class="badge bg-*">content</span>`, such as `bg-primary` (blue), `bg-success` (green), etc. It supports various styles: color variations are implemented through the `bg-*` class (e.g., red, yellow, gray); size adjustment uses `badge-sm` (small) and `badge-lg` (large); the pill shape (`badge-pill`) is more eye-catching, suitable for scenarios like notification counts. Common scenarios include: notification quantity prompts (e.g., red dots with numbers next to buttons), category tags ("Hot," "New" for products), unread notifications in navigation bars, and status marking for list items. When using, note semantic correctness (using `<span>`), color contrast, avoid overuse, and keep information concise and intuitive.