Button Component for Canvas

Problem/Motivation

We need to develop a new Button component that is fully compatible with Drupal Canvas and aligned with Bootstrap 5 standards.
The component should provide a reusable and flexible call-to-action element with configurable styles and proper accessibility support.

The Button component will be used across Hero sections, Cards, Sliders, Content blocks, and promotional areas where clear user interaction is required.

Key requirements:

• Bootstrap 5 button structure and utility classes
• Canvas-supported configuration
• Style variants (Primary, Secondary, Outline, Light, Dark, etc.)
• Size options (Small, Medium, Large)
• Optional full-width button
• Optional icon support
• Link and Link target configuration
• Proper accessibility and semantic markup
• No inline CSS/JS (SCSS-based styling only)

Steps to reproduce

1. Add the Button component in Drupal Canvas.
2. Enter button text.
3. Select style variant (Primary, Outline, etc.).
4. Select size (Small, Medium, Large).
5. Add link and configure target if required.
6. Optionally enable full-width mode.
7. Verify rendering across breakpoints.

The button should render consistently using Bootstrap classes and adapt correctly inside different layout contexts.

Proposed resolution

• Develop a new Button component using Bootstrap 5 button utilities.
• Implement configurable style variants and size options.
• Add optional full-width support using Bootstrap utilities.
• Ensure proper link handling and semantic structure.
• Fix light-text contrast issues for accessibility compliance.
• Move all styling to SCSS and remove inline CSS/JS.
• Ensure full Canvas schema compatibility.

The Button component will provide a consistent, accessible, and reusable call-to-action solution 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