Buttons
Default Button
Use any of the available .btn btn- classes to quickly create a styled button.
<div className="btn-list">
<Link href="#!" className="btn btn-default">Default</Link>
<Link href="#!" className="btn btn-primary">Primary</Link>
<Link href="#!" className="btn btn-secondary">Secondary</Link>
<Link href="#!" className="btn btn-success">Success</Link>
<Link href="#!" className="btn btn-info">Info</Link>
<Link href="#!" className="btn btn-warning">Warning</Link>
<Link href="#!" className="btn btn-danger">Danger</Link>
<Link href="#!" className="btn btn-light btn-link">Link</Link>
</div>
Disable Default Button
Use any of the available .btn btn- classes you must add the .disabled className to make it visually appear disabled.
<div className="btn-list">
<Link href="#!" className="btn btn-default disabled">Default</Link>
<Link href="#!" className="btn btn-primary disabled">Primary</Link>
<Link href="#!" className="btn btn-secondary disabled">Secondary</Link>
<Link href="#!" className="btn btn-success disabled">Success</Link>
<Link href="#!" className="btn btn-info disabled">Info</Link>
<Link href="#!" className="btn btn-warning disabled">Warning</Link>
<Link href="#!" className="btn btn-danger disabled">Danger</Link>
<Link href="#!" className="btn btn-light btn-link disabled">Link</Link>
</div>
Rounded Button
Use any of the available .btn-pill classes to quickly create a styled button.
<div className="btn-list">
<Link href="#!" className="btn btn-default btn-pill">Default</Link>
<Link href="#!" className="btn btn-primary btn-pill">Primary</Link>
<Link href="#!" className="btn btn-secondary btn-pill">Secondary</Link>
<Link href="#!" className="btn btn-success btn-pill">Success</Link>
<Link href="#!" className="btn btn-info btn-pill">Info</Link>
<Link href="#!" className="btn btn-warning btn-pill">Warning</Link>
<Link href="#!" className="btn btn-danger btn-pill">Danger</Link>
</div>
Outline Button
Use any of the available .btn-outline- classes to quickly create a styled button.
<div className="btn-list">
<Link href="#!" className="btn btn-outline-default">Default</Link>
<Link href="#!" className="btn btn-outline-primary">Primary</Link>
<Link href="#!" className="btn btn-outline-secondary">Secondary</Link>
<Link href="#!" className="btn btn-outline-success">Success</Link>
<Link href="#!" className="btn btn-outline-info">Info</Link>
<Link href="#!" className="btn btn-outline-warning">Warning</Link>
<Link href="#!" className="btn btn-outline-danger">Danger</Link>
</div>
Light Button
Use any of the available .btn-light- classes to quickly create a styled button.
<div className="btn-list">
<Link href="#!" className="btn btn-default-light">Default</Link>
<Link href="#!" className="btn btn-primary-light ">Primary</Link>
<Link href="#!" className="btn btn-secondary-light ">Secondary</Link>
<Link href="#!" className="btn btn-success-light ">Success</Link>
<Link href="#!" className="btn btn-info-light ">Info</Link>
<Link href="#!" className="btn btn-warning-light ">Warning</Link>
<Link href="#!" className="btn btn-danger-light ">Danger</Link>
</div>
Button with icon
Basic buttons are traditional buttons with borders color opitons.
<div className="btn-list btn-list-icon">
<Button variant='dark'><i className="fe fe-upload me-2"></i>Upload</Button>
<Button variant='warning'><i className="fe fe-heart me-2"></i>I like</Button>
<Button variant='success'><i className="fe fe-check me-2"></i>I agree</Button>
<Button variant='primary'><i className="fe fe-plus me-2"></i>More</Button>
<Button variant='danger'><i className="fe fe-link me-2"></i>Link</Button>
<Button variant='info'><i className="fe fe-message-circle me-2"></i>Comment</Button>
</div>
Button size
Add .btn-lg or .btn-sm for additional sizes.
<div className="btn-list">
<Row cols={4}>
<Col className="mb-2">
<div className="btn-list">
<Button className="btn-sm mb-1" variant='primary'>Small button</Button>
<Button className="btn-sm mb-1" variant='primary'>Small button</Button>
</div>
</Col>
<Col className="mb-2">
<Button className="mb-1" variant='secondary'>Default button</Button>
<Button className="mb-1" variant='secondary'>Default button</Button>
</Col>
<Col className="mb-2">
<Button className="btn-lg mb-1 me-1" variant='success'>Large button</Button>
<Button className="btn-lg mb-1" variant='success'>Large button</Button>
</Col>
</Row>
</div>
Block Button
Add .d-grid or .gap-2 for additional sizes.
<div className="d-grid gap-2">
<Button className="mb-1" variant='secondary-light'>Block button</Button>
<Button className="mb-1" variant='danger-light'>Block button</Button>
</div>
Icon buttons
Icon only button. Add .btn-icon classes to quickly create a styled button..
<div className="btn-list">
<Button className="btn-icon" variant='primary'><i className="fe fe-activity"></i></Button>
<Button className="btn-icon" variant='github'><i className="fe fe-github"></i></Button>
<Button className="btn-icon" variant='success'><i className="fe fe-bell"></i></Button>
<Button className="btn-icon" variant='warning'><i className="fe fe-star"></i></Button>
<Button className="btn-icon" variant='danger'><i className="fe fe-trash"></i></Button>
<Button className="btn-icon" variant='purple'><i className="fe fe-mail"></i></Button>
<Button className="btn-icon" variant='secondary'><i className="fe fe-git-merge"></i></Button>
</div>
Social buttons
You can use only icons.
<div className="btn-list">
<Button className="btn-icon" variant='facebook'><i className="fa fa-facebook"></i></Button>
<Button className="btn-icon" variant='twitter'><i className="fa fa-twitter"></i></Button>
<Button className="btn-icon" variant='google'><i className="fa fa-google"></i></Button>
<Button className="btn-icon" variant='youtube'><i className="fa fa-youtube"></i></Button>
<Button className="btn-icon" variant='vimeo'><i className="fa fa-vimeo"></i></Button>
<Button className="btn-icon" variant='dribbble'><i className="fa fa-dribbble"></i></Button>
<Button className="btn-icon" variant='github'><i className="fa fa-github"></i></Button>
<Button className="btn-icon" variant='instagram'><i className="fa fa-instagram"></i></Button>
<Button className="btn-icon" variant='pinterest'><i className="fa fa-pinterest"></i></Button>
</div>
Button Tags
Add .btn, <input>, <a>classes to quickly create a styled button..
<div className="btn-list">
<Link className="btn btn-primary" href="#!" role="button">Link</Link>
<Button variant="primary" type="submit">Button</Button>
<input className="btn btn-primary" type="button" value="Input" />
<input className="btn btn-primary" type="submit" value="Submit" />
<input className="btn btn-primary" type="reset" value="Reset" />
</div>
Toggle buttons
Add data-bs-toggle="button" to toggle a button .active className & required aria-pressed="true".
<div className="btn-list">
<Button variant="primary">Toggle button</Button>
<Button variant="primary" active>Active toggle button</Button>
<Button variant="primary" disabled >Disabled toggle button</Button>
</div>
Color variations
The classic button, in different colors.
<div className="btn-list">
<Link href="#!" className="btn btn-blue">Blue</Link>
<Link href="#!" className="btn btn-azure">Azure</Link>
<Link href="#!" className="btn btn-indigo">Indigo</Link>
<Link href="#!" className="btn btn-purple">Purple</Link>
<Link href="#!" className="btn btn-pink">Pink</Link>
<Link href="#!" className="btn btn-red">Red</Link>
<Link href="#!" className="btn btn-orange">Orange</Link>
<Link href="#!" className="btn btn-yellow">Yellow</Link>
<Link href="#!" className="btn btn-lime">Lime</Link>
<Link href="#!" className="btn btn-green">Green</Link>
<Link href="#!" className="btn btn-teal">Teal</Link>
<Link href="#!" className="btn btn-cyan">Cyan</Link>
<Link href="#!" className="btn btn-gray">Gray</Link>
<Link href="#!" className="btn btn-gray-dark">Dark gray</Link>
</div>
Social buttons
The classic button, in different social classes.
<div className="btn-list">
<Button variant="facebook"><i className="fa fa-facebook me-2"></i>Facebook</Button>
<Button variant="twitter"><i className="fa fa-twitter me-2"></i>Twitter</Button>
<Button variant="google"><i className="fa fa-google me-2"></i>Google</Button>
<Button variant="youtube"><i className="fa fa-youtube me-2"></i>Youtube</Button>
<Button variant="vimeo"><i className="fa fa-vimeo me-2"></i>Vimeo</Button>
<Button variant="dribbble"><i className="fa fa-dribbble me-2"></i>Dribble</Button>
<Button variant="github"><i className="fa fa-github me-2"></i>Github</Button>
<Button variant="instagram"><i className="fa fa-instagram me-2"></i>Instagram</Button>
<Button variant="pinterest"><i className="fa fa-pinterest me-2"></i>Pinterest</Button>
<Button variant="vk"><i className="fa fa-vk me-2"></i>VKontakte</Button>
<Button variant="rss"><i className="fa fa-rss me-2"></i>RSS</Button>
<Button variant="flickr"><i className="fa fa-flickr me-2"></i>Flickr</Button>
</div>
Loading button
Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.
<div className="btn-list">
<Button className="btn-loading" variant='primary'>Button text</Button><br />
<Button className="btn-loading btn-icon" variant='success'><i className="fe fe-check"></i></Button>
<Button className="btn-loading btn-sm" variant='warning'>Button text</Button><br />
<Button className="btn-loading btn-lg" variant='danger'>Button text</Button>
<Button className="btn-loading d-grid" variant='info'>Button text</Button>
</div>
Button dropdown
Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.
<div className="btn-list">
<Dropdown>
<Dropdown.Toggle variant="secondary">
<i className="fe fe-calendar"></i>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown>
<Dropdown.Toggle variant="info">
<i className="fe fe-calendar me-2"></i>Show calendar
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown>
<Dropdown.Toggle variant="danger">
Show calendar
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Basic Button Group
Use any of the available .btn in .btn-group classes to quickly create a styled button.
<div className="btn-group" role="group" aria-label="Basic example">
<Button variant='primary'>Left</Button>
<Button variant='primary'>Middle</Button>
<Button variant='primary'>Right</Button>
</div>
Button Toolbar
Combine sets of button groups into button toolbars for more complex components.
<div className="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<ButtonGroup className="me-2 mb-1">
<Button variant='primary'>1</Button>
<Button variant='primary'>2</Button>
<Button variant='primary'>3</Button>
<Button variant='primary'>4</Button>
</ButtonGroup>
<ButtonGroup className="me-2 mb-1">
<Button variant='secondary'>5</Button>
<Button variant='secondary'>6</Button>
<Button variant='secondary'>7</Button>
</ButtonGroup>
<ButtonGroup className="mb-1">
<Button variant='info'>8</Button>
</ButtonGroup>
</div>
Outline Button Group
Use any of the available .btn .btn-outline- in .btn-group classes to quickly create a styled button.
<div className="example">
<ButtonGroup>
<Button variant='outline-primary'>Left</Button>
<Button variant='outline-primary'>Middle</Button>
<Button variant='outline-primary'>Right</Button>
</ButtonGroup>
</div>
Min-Width Buttons
Add .btn, .w-xs, .w-sm, .w-md, .w-lg, classes to quickly create a styled button..
<div className="btn-list">
<Button className="w-xs mb-1" variant="primary">Min-XS</Button>
<Button className="w-sm mb-1" variant="secondary">Min-SM</Button>
<Button className="w-md mb-1" variant="danger">Min-MD</Button>
<Button className="w-lg mb-1" variant="success">Min-LG</Button>
</div>
Checkbox Button Group
Use any of the available .btn in .btn-group classes to quickly create a styled button.
export function Checkedbutton() {
const [isChecked, setIsChecked] = useState(false);
const handleOnChange = () => {
setIsChecked(!isChecked);
};
return (
<div className="btn-list checkboxbtns">
<ButtonGroup>
<ToggleButtonGroup type="checkbox" >
<ToggleButton className="mb-2" id="toggle-check" checked={isChecked} variant="outline-primary" value={1} onChange={handleOnChange}>Checkbox </ToggleButton>
<ToggleButton className="mb-2" id="toggle-check1" checked={isChecked} variant="outline-primary" value={2} onChange={handleOnChange}>Checkbox </ToggleButton>
<ToggleButton className="mb-2" id="toggle-check2" checked={isChecked} variant="outline-primary" value={3} onChange={handleOnChange}>Checkbox </ToggleButton>
</ToggleButtonGroup>
</ButtonGroup>
</div>
);
}
Radio Button Group
Use any of the available .btn in .btn-group classes to quickly create a styled button.
export function Buttondata() {
return (
<div className="btn-group radiobtns" role="group" aria-label="Basic radio toggle button group">
<ToggleButtonGroup type="radio" name="options" defaultValue={1}>
<ToggleButton id="tbg-radio-1" variant='outline-primary' value={1} >
Radio 1
</ToggleButton>
<ToggleButton id="tbg-radio-2" variant='outline-primary' value={2}>
Radio 2
</ToggleButton>
<ToggleButton id="tbg-radio-3" variant='outline-primary' value={3}>
Radio 3
</ToggleButton>
</ToggleButtonGroup>
</div>
)
}
Button Group Sizes
Use any of the available .btn-group-* in .btn-group classes to quickly create a styled button.
<div className="example">
<ButtonGroup className="btn-group-lg mb-3">
<Button variant='primary'>Left</Button>
<Button variant='primary'>Middle</Button>
<Button variant='primary'>Right</Button>
</ButtonGroup><br />
<ButtonGroup className="mb-3">
<Button variant='primary'>Left</Button>
<Button variant='primary'>Middle</Button>
<Button variant='primary'>Right</Button>
</ButtonGroup><br />
<ButtonGroup className="btn-group-sm">
<Button variant='primary'>Left</Button>
<Button variant='primary'>Middle</Button>
<Button variant='primary'>Right</Button>
</ButtonGroup>
</div>
Vertical Button Group
Use any of the available .btn-group-vertical classes to quickly create a styled button.
<div className="example">
<ButtonGroup vertical>
<Button variant='primary'>Button</Button>
<Button variant='primary'>Button</Button>
<Dropdown >
<Dropdown.Toggle className='br-0'>
Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Dropdown Link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown Link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Button variant='primary'>Button</Button>
<Button variant='primary'>Button</Button>
</ButtonGroup>
</div>
