reactstrap#ButtonToggle JavaScript Examples
The following examples show how to use
reactstrap#ButtonToggle.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: applicants.page.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
ApplicantsPage = () => {
return (
<div className="container mt-4 mb-4">
<Jumbotron fluid className="border-bottom rounded-top">
<Container fluid>
<h1 className="display-5">Applicants</h1>
<p className="lead float-right font-weight-bold">
<strong>Position</strong>: Senior Developer
</p>
</Container>
</Jumbotron>
<div>
<Row>
{/* Map through all the data */}
{listOfApplicants.map((applicant) => (
<Col sm="6 mt-4" key={applicant.id}>
<Card body>
<CardTitle>
<h3>{applicant.name}</h3>
<hr />
</CardTitle>
<CardText>
<Row className="mt-2">
<Col sm="6">
<strong>Email:</strong>
</Col>
<Col>{applicant.email}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Contact:</strong>
</Col>
<Col>7{applicant.contact}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Time Zone</strong>
</Col>
<Col>{applicant.timeZone}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Availibility</strong>
</Col>
<Col>{applicant.availability}</Col>
</Row>
</CardText>
<ButtonToggle color="primary">View Resume</ButtonToggle>
</Card>
</Col>
))}
{/* end of data mapping */}
</Row>
</div>
</div>
);
}
Example #2
| Source File: FriendsBtn.js From Frontend with Apache License 2.0 | 4 votes |
|
FriendsBtn = ({ creds, acc, handle, user }) => {
async function sendReq(e) {
// console.log("reached");
e.preventDefault()
const res = await fetch(
`https://api.codedigger.tech/auth/user/send-request`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
to_user: handle,
}),
}
)
res.json()
// .then(res => console.log(res));
window.location.reload()
}
async function acceptReq(e) {
e.preventDefault()
const res = await fetch(
`https://api.codedigger.tech/auth/user/accept-request`,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
from_user: handle,
}),
}
)
res.json()
// .then(res => console.log(res));
window.location.reload()
}
async function removeFrnd(e) {
e.preventDefault()
const res = await fetch(
`https://api.codedigger.tech/auth/user/remove-friend`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
user: handle,
}),
}
)
res.json()
// .then(res => console.log(res));
window.location.reload()
}
function showList(e) {
e.preventDefault()
}
const [friendsOptions, setFriendsOptions] = useState(true)
const toggle = (e) => {
e.preventDefault()
setFriendsOptions(!friendsOptions)
if (friendsOptions) {
// console.log("true");
$('.popout-right>.popout-menu-right').removeClass('hideOptions')
$('.popout-right>.popout-menu-right').addClass('showOptions')
$('.window-button>.icon-popout-right').removeClass(
'glyphicon-menu-hamburger'
)
$('.window-button>.icon-popout-right').addClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').addClass('animated bounceIn')
} else {
// console.log("false");
$('.popout-right>.popout-menu-right').removeClass('showOptions')
$('.popout-right>.popout-menu-right').addClass('hideOptions')
$('.window-button>.icon-popout-right').removeClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').removeClass('animated bounceIn')
$('.window-button>.icon-popout-right').addClass(
'animated bounceIn glyphicon-menu-hamburger'
)
}
}
if (user.result.about_user === 'Not Authenticated') {
return (
<div>
{alert('Please login to Proceed!!')}
{window.location.assign('/')}
</div>
)
} else if (user.result.about_user === 'Stalking') {
return (
<div>
<ButtonToggle
style={{
position: 'absolute',
right: '200px',
bottom: '245px',
}}
onClick={sendReq}
>
{' '}
Add Friend
</ButtonToggle>
</div>
)
} else if (user.result.about_user === 'Request Sent') {
return (
<div>
<ButtonToggle
style={{
position: 'absolute',
right: '200px',
bottom: '265px',
}}
>
{' '}
Request Sent
</ButtonToggle>
</div>
)
} else if (user.result.about_user === 'Logged In User Itself') {
return (
<>
<ListModal creds={creds} acc={acc} handle={handle} user={user} />
</>
)
} else if (user.result.about_user === 'Request Received') {
return (
<div>
<ButtonToggle
style={{
position: 'absolute',
right: '168px',
bottom: '275px',
}}
onClick={acceptReq}
>
{' '}
Accept Request
</ButtonToggle>
</div>
)
} else if (user.result.about_user === 'Friends') {
return (
<div>
<ButtonToggle
style={{
position: 'absolute',
right: '170px',
bottom: '275px',
}}
onClick={removeFrnd}
>
{' '}
Remove Friend
</ButtonToggle>
</div>
)
} else {
return null
}
}
Example #3
| Source File: MentorBtn.js From Frontend with Apache License 2.0 | 4 votes |
|
function MentorBtn({ creds, acc, handle, user }) {
// console.log(user.result.codeforces);
// console.log(handle);
// console.log(creds.username);
// console.log(creds);
// console.log(acc);
// console.log(handle);
// console.log(user);
const [mentors, setMentors] = useState({})
useEffect(() => {
async function getMentors() {
const res = await fetch(`https://api.codedigger.tech/codeforces/mentor`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
})
res.json().then((res) => setMentors(res))
// .then(res => console.log(mentors))
}
getMentors()
}, [])
async function addMentor(mentor) {
const res = await fetch(`https://api.codedigger.tech/codeforces/mentor`, {
method: 'PUT',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
guru: mentor,
}),
})
window.location.reload()
}
async function removeMentor(mName) {
const res = await fetch(`https://api.codedigger.tech/codeforces/mentor`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
guru: mName,
}),
})
window.location.reload()
}
if (handle === creds.username) {
return (
<>
{mentors ? (
<MentorModal
creds={creds}
acc={acc}
handle={handle}
user={user}
mentors={mentors}
/>
) : (
<Loading />
)}
</>
)
} else if (user.result.about_mentor === 'Mentor') {
return (
<ButtonToggle
onClick={() => {
removeMentor(user.result.codeforces)
}}
style={{
position: 'absolute',
right: '35px',
bottom: '245px',
}}
>
Remove Mentor
</ButtonToggle>
)
} else {
return (
<div>
<ButtonToggle
onClick={() => {
addMentor(user.result.codeforces)
}}
style={{
position: 'absolute',
right: '50px',
bottom: '265px',
}}
>
Add Mentor
</ButtonToggle>
</div>
)
}
}
Example #4
| Source File: MentorModal.js From Frontend with Apache License 2.0 | 4 votes |
|
MentorModal = ({ creds, acc, handle, user, mentors }) => {
const [modal, setModal] = useState(false)
const toggle = (e) => {
e.preventDefault()
setModal(!modal)
}
const [formUsername, setFormUsername] = useState('')
const [friendStatus, setFriendStatus] = useState({})
async function submitForm(e) {
e.preventDefault()
// console.log(formUsername);
const res = await fetch(`https://api.codedigger.tech/codeforces/mentor`, {
method: 'PUT',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
guru: formUsername,
}),
})
res.json().then((res) => setFriendStatus(res))
window.location.reload()
}
return (
<>
<ButtonToggle className="MentorButton" onClick={toggle}>
<svg
style={{ width: '27px' }}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="WatsonPersonalityInsights_svg__a"
x1="7"
y1="17.5"
x2="13"
y2="17.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-opacity="0"></stop>
<stop offset=".8"></stop>
</linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__b"
x1="-4263"
y1="-3384.5"
x2="-4257"
y2="-3384.5"
gradientTransform="translate(4282 3402)"
xlinkHref="#WatsonPersonalityInsights_svg__a"
></linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__c"
x1="-411.5"
y1="-3817.5"
x2="-402.5"
y2="-3817.5"
gradientTransform="translate(423 3833)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-opacity="0"></stop>
<stop offset=".53"></stop>
</linearGradient>
<linearGradient
id="WatsonPersonalityInsights_svg__e"
y1="32"
x2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#be95ff"></stop>
<stop offset=".9" stop-color="#4589ff"></stop>
</linearGradient>
<mask
id="WatsonPersonalityInsights_svg__d"
x="0"
y="0"
width="32"
height="32"
maskUnits="userSpaceOnUse"
>
<path
d="M30 6a4 4 0 10-5 3.858V15a2 2 0 01-2 2h-6v-7h3V2h-8v8h3v7H9a2 2 0 01-2-2V9.858a4 4 0 10-2 0V15a4 4 0 004 4h14a4 4 0 004-4V9.858A4 4 0 0030 6zM14 4h4v4h-4zM4 6a2 2 0 112 2 2 2 0 01-2-2zm22 2a2 2 0 112-2 2 2 0 01-2 2z"
fill="#f4f4f4"
></path>
<path
fill="url(#WatsonPersonalityInsights_svg__a)"
d="M7 15h6v5H7z"
></path>
<path
transform="rotate(180 22 17.5)"
fill="url(#WatsonPersonalityInsights_svg__b)"
d="M19 15h6v5h-6z"
></path>
<path
transform="rotate(90 16 15.5)"
fill="url(#WatsonPersonalityInsights_svg__c)"
d="M11.5 11.5h9v8h-9z"
></path>
</mask>
</defs>
<g data-name="Layer 2">
<g data-name="Dark theme icons">
<g mask="url(#WatsonPersonalityInsights_svg__d)">
<path
fill="url(#WatsonPersonalityInsights_svg__e)"
d="M0 0h32v32H0z"
></path>
</g>
<path
d="M13 25h6a3 3 0 013 3v2h-2v-2a1 1 0 00-1-1h-6a1 1 0 00-1 1v2h-2v-2a3 3 0 013-3zM20 20a4 4 0 11-4-4 4 4 0 014 4zm-6 0a2 2 0 102-2 2 2 0 00-2 2z"
fill="#f4f4f4"
></path>
</g>
</g>
</svg>
<span style={{ fontSize: '16px' }}>My Mentors</span>
</ButtonToggle>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader>List of Mentors</ModalHeader>
<ModalBody>
{mentors ? <MentorList mentors={mentors} acc={acc} /> : <Loading />}
</ModalBody>
<Form onSubmit={submitForm} style={{ marginBottom: '70px' }}>
<Label for="formUsername">Add Mentor</Label>
<div style={{ display: 'flex' }}>
<Input
style={{ marginLeft: '11px', width: '73%' }}
type="text"
id="formUsername"
onChange={(e) => setFormUsername(e.target.value)}
placeholder="Enter Username"
/>
<Button
style={{
position: 'relative',
top: '-4px',
left: '0px',
borderRadius: '13px',
}}
onClick={submitForm}
type="submit"
>
Add
</Button>
</div>
</Form>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
</>
)
}
Example #5
| Source File: UiButtons.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Buttons" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default buttons</h4>
<p className="card-title-desc">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
<div className="button-items">
<Button
color="primary"
className=" waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className=" waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Outline buttons</h4>
<p className="card-title-desc">Add one another property like <code className="highlighter-rouge">outline</code> ones to remove all background images and colors on any button.</p>
<div className="button-items">
<Button
color="primary"
outline
className="waves-effect waves-light mr-1"
>
Primary
</Button>
<Button color="light" outline className="waves-effect mr-1">
Light
</Button>
<Button
color="success"
outline
className="waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
outline
className="waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
outline
className="waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
outline
className="waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
outline
className="waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="secondary" outline className="waves-effect">
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Rounded buttons</h4>
<p className="card-title-desc">Use class <code>.btn-rounded</code> for button round border.</p>
<div className="button-items">
<Button
color="primary"
className="btn-rounded waves-effect waves-light mr-1"
>
Primary
</Button>
<Button
color="light"
className="btn-rounded waves-effect mr-1"
>
Light
</Button>
<Button
color="success"
className="btn-rounded waves-effect waves-light mr-1"
>
Success
</Button>
<Button
color="info"
className="btn-rounded waves-effect waves-light mr-1"
>
Info
</Button>
<Button
color="warning"
className="btn-rounded waves-effect waves-light mr-1"
>
Warning
</Button>
<Button
color="danger"
className="btn-rounded waves-effect waves-light mr-1"
>
Danger
</Button>
<Button
color="dark"
className="btn-rounded waves-effect waves-light mr-1"
>
Dark
</Button>
<Button color="link" className="waves-effect mr-1">
Link
</Button>
<Button
color="secondary"
className="btn-rounded waves-effect"
>
Secondary
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons with icon</h4>
<p className="card-title-desc">Add icon in button.</p>
<div className="button-items">
<Button color="primary" type="button" className="waves-effect waves-light mr-1">
Primary <i className="ri-arrow-right-line align-middle ml-2"></i>
</Button>
<Button color="success" type="button" className="waves-effect waves-light mr-1">
<i className="ri-check-line align-middle mr-2"></i> Success
</Button>
<Button color="warning" type="button" className="waves-effect waves-light mr-1">
<i className="ri-error-warning-line align-middle mr-2"></i> Warning
</Button>
<Button color="danger" type="button" className="waves-effect waves-light mr-1">
<i className="ri-close-line align-middle mr-2"></i> Danger
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons Sizes</h4>
<p className="card-title-desc">Add Property size=""<code>lg</code> or <code>sm</code> for additional sizes.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
className="waves-effect waves-light mr-1"
>
Large button
</Button>
<Button
color="light"
size="lg"
className="waves-effect mr-1"
>
Large button
</Button>
<Button
color="primary"
size="sm"
className="waves-effect waves-light mr-1"
>
Small button
</Button>
<Button
color="light"
size="sm"
className="waves-effect"
>
Small button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Buttons width</h4>
<p className="card-title-desc">Add <code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> and <code> .w-lg</code> className for additional buttons width.</p>
<div className="button-items">
<Button type="button" color="primary" className="w-xs waves-effect waves-light mr-1">Xs</Button>
<Button type="button" color="danger" className="w-sm waves-effect waves-light mr-1">Small</Button>
<Button type="button" color="warning" className="w-md waves-effect waves-light mr-1">Medium</Button>
<Button type="button" color="success" className="w-lg waves-effect waves-light">Large</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button tags</h4>
<p className="card-title-desc">The <code className="highlighter-rouge">.btn</code>
classes are designed to be used with the <code
className="highlighter-rouge"><button></code> element.
However, you can also use these classes on <code
className="highlighter-rouge"><Link></code> or <code
className="highlighter-rouge"><input></code> elements (though
some browsers may apply a slightly different rendering).</p>
<div className="button-items">
<Link
className="btn btn-primary waves-effect waves-light"
to="#"
role="button"
>
Link
</Link>
<Button
color="success"
className="waves-effect waves-light mr-1"
type="submit"
>
Button
</Button>
<input
className="btn btn-info mr-1"
type="button"
value="Input"
/>
<input
className="btn btn-danger mr-1"
type="submit"
value="Submit"
/>
<input
className="btn btn-warning mr-1"
type="reset"
value="Reset"
/>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Toggle states</h4>
<p className="card-title-desc">Add <code className="highlighter-rouge">data-toggle="button"</code>
to toggle a button’s <code className="highlighter-rouge">active</code>
state. If you’re pre-toggling a button, you must manually add the <code
className="highlighter-rouge">.active</code> class
<strong>and</strong> <code
className="highlighter-rouge">aria-pressed="true"</code> to the
<code className="highlighter-rouge"><button></code>.
</p>
<div className="button-items">
<ButtonToggle
color="primary"
className="btn btn-primary waves-effect waves-light"
>
Single toggle
</ButtonToggle>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Block Buttons</h4>
<p className="card-title-desc">Create block level buttons—those that span the full width of a parent—by adding property <code
className="highlighter-rouge">block</code>.</p>
<div className="button-items">
<Button
color="primary"
size="lg"
block
className="waves-effect waves-light"
>
Block level button
</Button>
<Button
color="light"
size="sm"
block
className="waves-effect"
>
Block level button
</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Checkbox & Radio Buttons</h4>
<p className="card-title-desc">Bootstrap’s <code
className="highlighter-rouge">.button</code> styles can be applied to
other elements, such as <code className="highlighter-rouge">
<label></code>s, to provide checkbox or radio style button
toggling. Add <code
className="highlighter-rouge">data-toggle="buttons"</code> to a
<code className="highlighter-rouge">.btn-group</code> containing those
modified buttons to enable toggling in their respective styles.</p>
<Row>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.check1
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox" defaultChecked
onClick={() =>
this.setState({
check1: !this.state.check1,
})
}
/> Checked-1
</Label>
<Label
className=
{
this.state.check2
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check2: !this.state.check2,
})
}
/> Checked-2
</Label>
<Label
className=
{
this.state.check3
? "btn btn-primary active"
: "btn btn-primary"
}
>
<Input type="checkbox"
onClick={() =>
this.setState({
check3: !this.state.check3
})
}
/> Checked-3
</Label>
</div>
</Col>
<Col xl={6}>
<div
className="btn-group btn-group-toggle"
data-toggle="buttons"
>
<Label
className=
{
this.state.radio1
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1" defaultChecked
onClick={() =>
this.setState({
radio1: true,
radio2: false,
radio3: false
})
}
/> Active
</Label>
<Label
className=
{
this.state.radio2
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: true,
radio3: false
})
}
/> Radio
</Label>
<Label
className=
{
this.state.radio3
? "btn btn-light active"
: "btn btn-light"
}
>
<Input type="radio" name="options" id="option1"
onClick={() =>
this.setState({
radio1: false,
radio2: false,
radio3: true
})
}
/> Radio
</Label>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button group</h4>
<p className="card-title-desc">Wrap a series of buttons with <code
className="highlighter-rouge">.btn</code> in <code
className="highlighter-rouge">.btn-group</code>.</p>
<Row>
<Col md={6}>
<ButtonGroup>
<Button color="primary" >
Left
</Button>
<Button color="primary" >
Middle
</Button>
<Button color="primary">
Right
</Button>
</ButtonGroup>
</Col>
<Col md={6}>
<div className="btn-group mt-4 mt-md-0" role="group" aria-label="Basic example">
<Button type="button" color="light"><i className="ri-menu-2-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-5-line"></i></Button>
<Button type="button" color="light"><i className="ri-menu-3-line"></i></Button>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Button toolbar</h4>
<p className="card-title-desc">Combine sets of button groups into
button toolbars for more complex components. Use utility classNamees as
needed to space out groups, buttons, and more.</p>
<ButtonToolbar >
<ButtonGroup>
<Button color="light">
1
</Button>
<Button color="light">
2
</Button>
<Button color="light">
3
</Button>
<Button color="light">
4
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light">
5
</Button>
<Button color="light">
6
</Button>
<Button color="light" >
7
</Button>
</ButtonGroup>
<ButtonGroup className="ml-2">
<Button color="light" >
8
</Button>
</ButtonGroup>
</ButtonToolbar >
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Sizing</h4>
<p className="card-title-desc">Instead of applying button sizing
classes to every button in a group, just add property size=""<code
className="highlighter-rouge">.btn-group-*</code> to each <code
className="highlighter-rouge">.btn-group</code>, including each one
when nesting multiple groups.</p>
<ButtonGroup size="lg">
<Button color="primary">
Left
</Button>
<Button color="primary">
Middle
</Button>
<Button color="primary" >
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup className="mt-2">
<Button color="light" >
Left
</Button>
<Button color="light" >
Middle
</Button>
<Button color="light">
Right
</Button>
</ButtonGroup>
<br />
<ButtonGroup size="sm" className="mt-2">
<Button color="danger">
Left
</Button>
<Button color="danger">
Middle
</Button>
<Button color="danger" >
Right
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Vertical variation</h4>
<p className="card-title-desc">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
<ButtonGroup vertical>
<Button
type="button"
color="light"
>
Button
</Button>
<ButtonDropdown
isOpen={this.state.drp_link}
toggle={() =>
this.setState({ drp_link: !this.state.drp_link })
}
>
<DropdownToggle caret color="light">
Dropdown <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown link</DropdownItem>
<DropdownItem>Dropdown link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<Button
color="light"
type="button"
>
Button
</Button>
<Button
color="light"
type="button"
>
Button
</Button>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
