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.

Design
Code
<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
<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>
Buy Now