React-Bootstrap add pull-right to Button

react-bootstrap
X-Istence picture X-Istence · Oct 24, 2016 · Viewed 30.3k times · Source

I have the following JSX using React-Bootstrap:

<Button bsStyle="danger pull-right" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

However this will show a warning in the console:

Warning: Failed prop type: Invalid prop `bsStyle` of value `danger pull-right` supplied to `Button`, expected one of ["success","warning","danger","info","default","primary","link"].

What is the best way to add pull-right to the list of styles?

The above code does work, but I'd prefer not to have any warnings in my console.

Answer

Andrew Li picture Andrew Li · Oct 24, 2016

If you take a look at React-Bootstrap Components, you'll see that prop bsStyle of component Button only accepts the following values:

"success", "warning", "danger", "info", "default", "primary", "link"

based on its visual appearance as mentioned in the warning message. If you intend to use Bootstrap's pull-right class, just use the className attribute which will set the class of that component:

<Button className="pull-right" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More