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.

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.

<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.

<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.

<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.

<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.

<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.

<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.

<Button variant="primary">Your Text Goes Here <ShoppingBag size="18px" /></Button>
With fixed width and height.
<Button variant="primary" className="me-1">+</Button>
<Button variant="primary"><Spinner animation="border" size="sm" /></Button>
Also available in all button sizes.
<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.

<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.

<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.

<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>