Add button modifier / navbar-item modifier that renders button as text, but not underlined

[svdHero]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.2] I am sure this issue is not a duplicate. However, it is somewhat related to #1583.

Description

I want to add a button with an onClick-Action as a navbar-item to a navbar-dropdown. Hence, I want the button to be rendered like my other navbar-items which are <a class="navbar-item">Foo</a>.

According to the documentation here, there are three modifiers for rendering a button without a border:

• is-white
• is-text
• is-ghost

However, is-text underlines the text, is-ghost colours the text and is-white only works for white background.

Feature request

Add a button modifier (or navbar-item modifier???) that renders the button like the other hyperlinks in the navbar-dropdown and provides the appropriate hover mouse-cursor (hand with index finger pointing).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ro31337]

No, don't close the issue. It's important as more frameworks are moving away from links to buttons for a11y reasons (for example, Rails 7).

It would be nice to test it inside of a navbar. For example:

        <div class="navbar-dropdown">
          <a href="/dashboard" class="navbar-item">Dashboard</a>
          <hr class="navbar-divider">
          <button class="NEW_CLASS_HERE navbar-item">Sign out</button>
        </div>

These two links should look & feel like the same. The reason we use a in the first case because it doesn't mutate the state (GET request). In the second case it mutates the state, so GET method won't work here, and there is a need for button (that can submit a form).

[Umukka]

I think the only solution is wrapping button in a div that has navbar-item class then setting background color of button same with navbar background.

<nav class="navbar is-primary" role="navigation" aria-label="main-navigation">
    <div class="navbar-brand"></div>

    <div class="navbar-menu">
        <div class="navbar-start">
            <div class="navbar-item">
                <button class="button is-primary">Some Text</button>
            </div>
        </div>

        <div class="navbar-end"></div>
    </div>
</nav>