Buttons
Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
<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 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"/>
<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>
<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 variant="primary">Your Text Goes Here <ShoppingBag size="18px" /></Button>
<Button variant="primary" className="me-1">+</Button><Button variant="primary"><Spinner animation="border" size="sm" /></Button>
<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>