CODEWITHSUNDEEP
cssbulma
roundtheworld
roundtheworld

Reputation: 2795

Bulma: Unable to use both is-static and is-primary modifies on a button

I want to create a button using Bulma that is non-interactive and a "primary" button. Here is my attempt:

<span class="button is-primary is-static">Hello World</span>

When I do this, I get a standard looking non-interactive button. It's gray in color and not clickable (this is NOT a disabled button). The is-primary modifier seems to have no effect on the button and I am unsure why. If I were to instead remove the is-static modifier, I get a normal looking "primary" button.

I found a hack-ish solution (by doing the following) but would prefer to use the modifiers provided by Bulma instead.

.button.non-interactive {
    background-color: $my-custom-primary-color !important;
    color: $white !important;
    border: hsl(0, 0%, 86%);
}

<span class="button non-interactive is-static">Hello World</span>

Upvotes: 1

Views: 413

Answers (1)

Reza Rahemtola
Reza Rahemtola

Reputation: 1182

That's because the color properties of is-static overrides is-primary.
I find this behavior normal because a static button with a color doesn't really looks like a static button...
To be sure, I've created the following buttons : on the left it's a button with is-primary, and on the right a button with is-static and non-reactive reproduced with your code adapted with my primary color.

enter image description here

And I didn't see any difference on the design, I just noticed that the pointer events were disabled and the right one, so I checked in the console to verify the changes made by is-static on the right button :

enter image description here

And indeed, is-static is just disabling pointer-events and box-shadow (useless for box-shadow in this case).

So if you want a non-interactive button with a color, I would advice you to use this class :

.button.non-interactive {
    pointer-events: none;  /* Imitate the behavior of is-static class */
    box-shadow: none;  /* Optional, it might be useful in cases where the button is in a container with a box-shadow */
}

And use it in your button with is-primary or any other color class :

<span class="button non-interactive is-primary">Hello World</span>

Upvotes: 1

Related Questions