Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Example
Use any of the available button style types to quickly create a styled button. Just modify the variant prop.
import {Button} from 'react-bootstrap';
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="link">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.
import {Button} from 'react-bootstrap';
<Button href="#">Link</Button>
<Button type="submit">Button</Button>
<Button as="input" type="button" value="Input" />
<Button as="input" type="submit" value="Submit" />
<Button as="input" type="reset" value="Reset" />
Outline buttons
For a lighter touch, Buttons also come in outline-* variants with no background color.
import {Button} from 'react-bootstrap';
<Button variant="outline-primary">Primary</Button>
<Button variant="outline-secondary">Secondary</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-danger">Danger</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-info">Info</Button>
<Button variant="outline-light">Light</Button>
<Button variant="outline-dark">Dark</Button>
Soft buttons
For a lighter touch, Buttons also come in normal btn variants and btn-soft variant, normal btn class should be first then need to add btn-soft.
import {Button} from 'react-bootstrap';
<Button variant="primary btn-soft">Primary</Button>
<Button variant="secondary btn-soft">Secondary</Button>
<Button variant="success btn-soft">Success</Button>
<Button variant="danger btn-soft">Danger</Button>
<Button variant="warning btn-soft">Warning</Button>
<Button variant="info btn-soft">Info</Button>
<Button variant="light btn-soft">Light</Button>
<Button variant="dark btn-soft">Dark</Button>
Soft Outline buttons
For a lighter touch, Buttons also come in normal btn outline variants and btn-soft variant, normal btn class should be first then need to add btn-soft.
import {Button} from 'react-bootstrap';
<Button variant="outline-primary btn-soft">Primary</Button>
<Button variant="outline-secondary btn-soft">Secondary</Button>
<Button variant="outline-success btn-soft">Success</Button>
<Button variant="outline-danger btn-soft">Danger</Button>
<Button variant="outline-warning btn-soft">Warning</Button>
<Button variant="outline-info btn-soft">Info</Button>
<Button variant="outline-light btn-soft">Light</Button>
<Button variant="outline-dark btn-soft">Dark</Button>
Buttons with Icons
Try with flowing code examples to use icons in buttons
import {Button} from 'react-bootstrap';
import Icon from '@/app/ui/Icon';
<Button variant="primary">
<Icon icon="arrow-left" className="icon" /> <span>Left Icon</span>
</Button>
<Button variant="primary">
<span>Right Icon</span>
<Icon icon="arrow-right" className="icon" />
</Button>
<Button variant="primary btn-icon">
<Icon icon="msg" className="icon" />
</Button>
<Button variant="color-primary btn-hover-primary btn-icon">
<Icon icon="msg" className="icon" />
</Button>
<Button variant="color-dark btn-hover-primary btn-icon btn-soft">
<Icon icon="msg" className="icon" />
</Button>
Sizes
Fancy larger or smaller buttons? Add size="lg", size="sm" for additional sizes.
import {Button} from 'react-bootstrap';
<Button variant="primary" size="lg">Large button</Button>
<Button variant="primary">Regular button</Button>
<Button variant="primary" size="sm">Small button</Button>
Sizes
Try with flowing code examples to use icons in buttons
import {Button} from 'react-bootstrap';
<Button variant="primary rounded-pill" size="lg">Large button</Button>
<Button variant="primary rounded-pill">Regular button</Button>
<Button variant="primary rounded-pill" size="sm">Small button</Button>
Disabled state
Make buttons look inactive by adding the disabled prop to.
import {Button} from 'react-bootstrap';
<Button variant="primary" disabled>Primary button</Button>
<Button variant="secondary" disabled>Button</Button>
<Button variant="outline-primary" disabled>Primary button</Button>
<Button variant="outline-secondary disabled">Button</Button>
Block buttons
Try with flowing code examples to use icons in buttons
import {Button} from 'react-bootstrap';
<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>