I'm building a NavBar in bootstrap (using React).
I would like to put a badge up in the right corner of the button.

This is the current situation:

[![current situation](https://i.stack.imgur.com/04oKy.png)](https://i.stack.imgur.com/04oKy.png)

```
<div>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-file-invoice-dollar fa-lg"></i>
                            <span class="badge badge-success">1</span>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-envelope fa-lg"></i>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-cogs fa-lg"></i>
                        </button>
                        <button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
                            <i class="fas fa-sign-out-alt fa-lg"></i>
                        </button>
                    </div>

```

And I would like to have something like this:

[![what I want](https://i.stack.imgur.com/478Eo.png)](https://i.stack.imgur.com/478Eo.png)