Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Regular Button

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

<Button variant="primary" className="me-1">Primary</Button>
<Button variant="secondary" className="me-1">Secondary</Button>
<Button variant="success" className="me-1">Success</Button>
<Button variant="warning" className="me-1">Warning</Button>
<Button variant="danger" className="me-1">Danger</Button> 
<Button variant="info" className="me-1">Info</Button>
<Button variant="light" className="me-1">Light</Button> 
<Button variant="dark" className="me-1">Dark</Button>
<Button variant="link" className="me-1">Link</Button>

Button tags

Normally <Button> components will render a HTML <button> element. However you can render whatever you'd like, adding a href prop will automatically render an <a/> element. You can use the as prop to render whatever your heart desires. React Bootstrap will take care of the proper ARIA roles for you.

Design

Code

Link

<Button href="#" className="me-1">Link</Button>
<Button type="submit"  className="me-1">Button</Button>
<Button as="input" type="button" value="Input"  className="me-1"/>
<Button as="input" type="submit" value="Submit"  className="me-1"/>
<Button as="input" type="reset" value="Reset"  className="me-1"/>

Outline buttons

For a lighter touch, Buttons also come in outline-* variants with no background color.

Design

Code

<Button variant="outline-primary" className="me-1">Primary</Button>
<Button variant="outline-secondary" className="me-1">Secondary</Button>
<Button variant="outline-success" className="me-1">Success</Button>
<Button variant="outline-warning" className="me-1">Warning</Button>
<Button variant="outline-danger" className="me-1">Danger</Button>
<Button variant="outline-info" className="me-1">Info</Button>
<Button variant="outline-light" className="me-1">Light</Button>
<Button variant="outline-dark" className="me-1">Dark</Button>

Sizes

Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.

Design

Code

<Button variant="primary" size="lg" className="me-1" >Large button</Button>
<Button variant="primary" className="me-1">Default button</Button>                          
<Button variant="primary" size="sm" className="me-1">Small button</Button>
<Button variant="primary" size="xs" className="me-1">Xtra Small button</Button>

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.

Design

Code

<div className="d-grid gap-2">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>                          
</div>

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see that change.

Design

Code

<div className="d-grid gap-2 d-md-block">
    <Button variant="primary" className="me-1">Button</Button>
    <Button variant="primary" className="me-1">Button</Button>                          
</div>

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use md={6}. Center it horizontally with .mx-auto, too.

Design

Code

<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.

Design

Code

<div className="d-grid gap-2 d-md-flex justify-content-md-end">
    <Button variant="primary">Button</Button>
    <Button variant="primary">Button</Button>                          
</div>

Button icons

A contained button with an icon.

Design

Code

<Button variant="primary">Your Text Goes Here <ShoppingBag size="18px" /></Button>

With fixed width and height.

Design

Code

<Button variant="primary" className="me-1">+</Button>
<Button variant="primary"><Spinner animation="border" size="sm"  /></Button>

Also available in all button sizes.

Design

Code

<Button variant="primary" size="lg" className="me-1">+</Button>
<Button variant="primary" className="me-1">+</Button>
<Button variant="primary" size="sm" className="me-1">+</Button>

Active state

To set a button's active state simply set the component's active prop.

Design

Code

<Button variant="primary" active className="me-1">Primary button</Button>
<Button variant="secondary" active  className="me-1">Button</Button>

Disabled state

Make buttons look inactive by adding the disabled prop to.

Design

Code

<Button variant="primary" disabled className="me-1">Primary button</Button>
<Button variant="secondary" disabled className="me-1">Button</Button>

Toggle states

Buttons can also be used to style checkbox and radio form elements. This is helpful when you want a toggle button that works neatly inside an HTML form.

Design

Code

Toggle button

Active toggle button

Disabled toggle button

<ToggleButtonGroup type="checkbox" className="mb-2 me-1">
    <ToggleButton id="tbg-check-1" value={1}>Toggle button</ToggleButton>                                
</ToggleButtonGroup>
<ToggleButtonGroup type="checkbox" defaultValue={1} className="mb-2 me-1">
    <ToggleButton id="tbg-check-1" value={1}>Active toggle button</ToggleButton>                                
</ToggleButtonGroup>
<ToggleButtonGroup type="checkbox" className="mb-2 me-1" >
    <ToggleButton id="tbg-check-1" value={1} disabled>Disabled toggle button</ToggleButton>                                
</ToggleButtonGroup>