# Buttons Button

# Options

Use any of the available button style types to quickly create a styled button. Just modify the bsStyle prop.


            const buttonsInstance = (
              <ButtonToolbar>
                <Button>Default</Button>
                <Button bsStyle="primary">Primary</Button>
                <Button bsStyle="success">Success</Button>
                <Button bsStyle="info">Info</Button>
                <Button bsStyle="warning">Warning</Button>
                <Button bsStyle="danger">Danger</Button>
                <Button bsStyle="link">Link</Button>
                <Button bsStyle="orange">Orange Button</Button>
              </ButtonToolbar>
            );

            
          

# Sizes

Fancy larger or smaller buttons? Add bsSize="large" or lg, bsSize="small" or sm, or bsSize="xsmall" or xs for additional sizes.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button xs bsStyle='primary'>Primary XSmall</Button>
              <Button bsSize='sm' bsStyle='primary'>Primary Small</Button>
              <Button bsStyle='primary'>Primary Default</Button>
              <Button lg bsStyle='primary'>Primary Large</Button>
            </ButtonToolbar>
          );

          
        

# Button Blocks

Create block level buttons—those that span the full width of a parent— by adding the block prop.


          const buttonsInstance = (
            <div>
              <Button lg bsStyle='primary' block>Block Level Button</Button>
              <Button lg block>Block Level Button</Button>
            </div>
          );

          
        

# Active State

To set a buttons active state simply set the components active prop.


          const buttonsInstance = (
            <div>
              <ButtonToolbar>
                <Button bsStyle="primary">Normal button</Button>
                <Button bsStyle="primary" active>Active button</Button>
              </ButtonToolbar>
            </div>
          );

          
        

# Button tags

The DOM element tag is choosen automatically for you based on the props you supply. Passing a href will result in the button using a <a /> element otherwise a <button /> element will be used.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button href="#">Link</Button>
              <Button>Button</Button>
            </ButtonToolbar>
          );

          
        

# Disabled state

Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button bsStyle="primary" disabled>Primary button</Button>
              <Button disabled>Button</Button>
            </ButtonToolbar>
          );

          
        

# Outlined

Outline buttons by passing in outlined attribute.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button bsStyle="primary" outlined>Primary button</Button>
              <Button bsStyle="green" outlined>Button</Button>
            </ButtonToolbar>
          );

          
        

# Rounded

Rounded buttons by passing in rounded attribute.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button bsStyle='green' rounded>
                <Icon glyph='icon-fontello-mail'/>
              </Button>
              <Button bsStyle='blue' rounded>
                <Icon glyph='icon-fontello-rss-1'/>
              </Button>
              <Button bsStyle='red' rounded>
                <Icon glyph='icon-fontello-cog'/>
              </Button>
            </ButtonToolbar>
          );

          
        

# Only On Hover

Add styles only on button hover/focus by passing in onlyOnHover attribute.


          const buttonsInstance = (
            <ButtonToolbar>
              <Button bsStyle="primary" onlyOnHover>Primary button</Button>
              <Button bsStyle="green" onlyOnHover>Button</Button>
            </ButtonToolbar>
          );

          
        

# Inverse

Inverse foreground/background colors. Add inverse attribute


          const buttonsInstance = (
            <Well className='bg-desaturateddarkblue75'>
              <ButtonToolbar>
                <Button bsStyle="primary" inverse>Primary button</Button>
                <Button bsStyle="green" inverse>Button</Button>
              </ButtonToolbar>
            </Well>
          );

          
        

# Retain Background

Outlined white border and color in the default state but behaves like non-outlined, colored background + border and white foreground on hover/focused state. Add retainBackground attribute.


          const buttonsInstance = (
            <Well className='bg-desaturateddarkblue75'>
              <ButtonToolbar>
                <Button bsStyle="darkcyan" retainBackground>Dark cyan button</Button>
              </ButtonToolbar>
            </Well>
          );

          
        

# Buttons Loading State

When activating an asynchronous action from a button it is a good UX pattern to give the user feedback as to the loading state, this can easily be done by updating your <Button />’s props from a state change like below.


          class LoadingButton extends React.Component {
            constructor(props) {
              super(props);

              this.state = {
                isLoading: false
              };
            }

            handleClick() {
              this.setState({isLoading: true});

              // This probably where you would have an "ajax" call
              setTimeout(() => {
                // Completed async action, set loading state back
                this.setState({isLoading: false});
              }, 2000);
            }

            render() {
              let isLoading = this.state.isLoading;
              return (
                <Button
                  bsStyle="primary"
                  disabled={isLoading}
                  onClick={!isLoading ? ::this.handleClick : null}>
                  {isLoading ? 'Loading...' : 'Loading state'}
                </Button>
              );
            }
          }

          const buttonsInstance = (
            <div>
              <LoadingButton />
            </div>
          );

          
        

# Props

NameTypeDefaultDescription
activebooleanfalse
blockbooleanfalse
bsClassstringbtnBase CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
bsSizeone of: "lg", "large", "sm", "small", "xs", "xsmall"Component size variations
xsbooleanfalseExtra small size variation shortcut
smbooleanfalseSmall size variation shortcut
lgbooleanfalseLarge size variation shortcut
componentClasselementTypeYou can use a custom element for this component
roundedbooleanfalseRounded button
onlyOnHoverbooleanfalseAdd styles only on button hover/focus
inversebooleanfalseInverse foreground/background colors
outlinedbooleanfalseOutline button
retainBackgroundbooleanfalseOutlined white border and color in the default state but behaves like non-outlined, colored background + border and white foreground on hover/focused state
disabledbooleanfalse
hrefstring
navDropdownbooleanfalse
navItembooleanfalse
onClickfunction
targetstring
typeone of: "button", "reset", "submit"'button'Defines HTML button type Attribute