Badge Component for Canvas

Problem/Motivation

We need to develop a new Badge component that is fully compatible with Drupal Canvas and aligned with Bootstrap 5 standards.
The component should provide a reusable and flexible way to display small status indicators, labels, categories, and highlights across the site.

The Badge component will be used in cards, listings, taxonomy displays, notifications, and UI indicators where compact visual emphasis is required.

Key requirements:

• Bootstrap 5 compatible badge structure
• Canvas configuration support
• Configurable size options (Small, Medium, Large)
• Background style options (Default, Outline, Soft)
• Optional link support
• Rounded / pill style option
• Responsive behavior
• No inline CSS/JS (SCSS-based styling only)

Steps to reproduce

1. Add the Badge component in Drupal Canvas.
2. Enter badge text.
3. Select size option.
4. Choose style (Default, Outline, Soft).
5. Enable optional link if required.
6. Test inside different components (Card, Hero, Taxonomy, etc.).

The component should render consistently using Bootstrap utility classes and adapt properly across different layout contexts.

Proposed resolution

• Develop a new Badge component following Bootstrap 5 badge structure.
• Implement configurable size options using Bootstrap utility classes.
• Add style variations (solid, outline, soft background).
• Provide optional link functionality with proper semantic markup.
• Implement rounded (pill) style toggle.
• Ensure responsive rendering across devices.
• Move all styling to SCSS and remove inline CSS/JS.
• Ensure full Canvas schema compatibility.

The Badge component will provide a lightweight, reusable, and consistent visual indicator aligned with Varbase and Bootstrap 5 architecture standards.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A