2

Using React-Bootstrap, how can I make an inverse glyphicon button?

I have buttons like this:

    <Button onClick={this.onHome} >
    <Glyphicon glyph="home" /> 
    </Button>

but I'd like them to appear reversed.

This question asks about colors which is not the same.

Thanks!

Community
  • 1
  • 1
carl
  • 383
  • 1
  • 5
  • 10

1 Answers1

1

To show a glyph on a green colored background, use bsStyle="success":

<Button onClick={this.onHome} bsStyle="success">
  <Glyphicon glyph="home" /> 
</Button>

Another example, using a label instead of a button:

<Label bsStyle="success"><Glyphicon glyph="home" /></Label>

Some alternatives to success are warning info and for Button also link. The complete list is in the documentation at http://react-bootstrap.github.io/components.html

Barry Staes
  • 3,890
  • 4
  • 24
  • 30
  • Thanks, but I was asking how to reverse the colors of the buttons. I thought it must be possible since the React-Bootstrap "Navbar" control has the "inverse" property which does this (for NavBar only). – carl Dec 29 '15 at 15:54