Tags don't work for text inside button

Hi,
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)?

obraz
obraz

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.


CleanShot 2023-10-27 at 17.43.45

2 Likes

Great stuff @georgecollier ! Thanks for sharing!

Another suggestion for tags to work is to … style the text element/s like a button :smiley:

1 Like

and be prepared to face a lot of pain when you are asked to make the group or text accessible :upside_down_face:

1 Like

What do you mean??

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.

1 Like

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 :slight_smile: