Describe the bug
One of the buttons in the toolbar, specifically the Link tool, renders a wrapping <span> element instead of a <button> like the other tools in the same ButtonGroup. Because of this, it does not follow the same border-radius rules and visually breaks the cohesion of the group. This makes the toolbar appear inconsistent.
To Reproduce
- Open this example: https://stackblitz.com/edit/react-bkem1ylv?file=index.js
- Inspect the Link tool and notice that a wrapping span is rendered instead:
Expected behavior
All buttons in a ButtonGroup, including the Link tool, should visually appear as a single cohesive group with matching border-radius and styling.
As a workaround a custom Link tool can be rendered:
https://stackblitz.com/edit/mmxf4w35-dyly13ug?file=src%2Fmain.vue
Reported in Ticket ID: 1705084
Describe the bug
One of the buttons in the toolbar, specifically the Link tool, renders a wrapping
<span>element instead of a<button>like the other tools in the sameButtonGroup. Because of this, it does not follow the sameborder-radiusrules and visually breaks the cohesion of the group. This makes the toolbar appear inconsistent.To Reproduce
Expected behavior
All buttons in a
ButtonGroup, including the Link tool, should visually appear as a single cohesive group with matching border-radius and styling.As a workaround a custom Link tool can be rendered:
https://stackblitz.com/edit/mmxf4w35-dyly13ug?file=src%2Fmain.vue
Reported in Ticket ID: 1705084