I’m trying to cross out text inside button, but tags " " don’t work inside button.
For normal text is fine, bot when I use it inside button it looks like on the screenshoot.
Is there a different method to formatting text inside button (or crossed out font)?
Create a fake button using a group that contains text. I do this using a reuseable element and it’s now my favourite way to create and configure buttons with icons, loading states, different styles etc.
Great stuff @georgecollier ! Thanks for sharing!
Another suggestion for tags to work is to … style the text element/s like a button
and be prepared to face a lot of pain when you are asked to make the group or text accessible
if you consume your app through assistive technologies a text or a div (a group) are not announced as interactive elements, therefore you don’t know that you can trigger actions with them. You need a proper html tag (like a button) or extra attributes, and bubble does not make your life easy with this.
Super cool. How does the reusable generate the group?
Just lots of conditionals on the 5 elements that make up the button (group, text, icon before, icon after, loading spinner).
Here’s a public editor view: Nextui | Bubble Editor
Reuseable-ising/componentising UI elements is my new favourite thing. Styles only get you so far. For instance, all of these input labels use one reuseable element:
I also do the same for checkboxes which are ugly by default, badges/chips, section headers etc
I have to try it. Thank you