Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Default buttons
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
import React from 'react';
import { Button } from 'react-bootstrap';
const DefaultButtons = () => {
return (
<>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="info">Info</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="light">Light</Button>
<Button variant="white">white</Button>
<Button variant="dark">Dark</Button>
</>
);
}
export default DefaultButtons;
| Props | Type | Default | Description |
|---|---|---|---|
variant | string | 'primary' | One or more button variant combinations buttons may be one of a variety of visual variants such as: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'
|
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Soft buttons
Quickly create a general button with .btn-soft-.
import React from 'react';
import { Button } from 'react-bootstrap';
const SoftButtons = () => {
return (
<>
<Button className="btn-soft-primary">Primary</Button>
<Button className="btn-soft-secondary">Secondary</Button>
<Button className="btn-soft-info">Info</Button>
<Button className="btn-soft-success">Success</Button>
<Button className="btn-soft-danger">Danger</Button>
<Button className="btn-soft-warning">Warning</Button>
<Button className="btn-soft-light">Light</Button>
<Button className="btn-soft-dark">Dark</Button>
</>
);
}
export default SoftButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| ClassNames | Values |
|---|---|
className="btn-soft-[Value]" | primary / success / warning / danger / info / light / dark |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Flush buttons
Quickly create a general button with .btn .btn-flush-.
import React from 'react';
import { Button } from 'react-bootstrap';
const FlushButtons = () => {
return (
<>
<Button className="btn-flush-primary">Primary</Button>
<Button className="btn-flush-secondary">Secondary</Button>
<Button className="btn-flush-info">Info</Button>
<Button className="btn-flush-success">Success</Button>
<Button className="btn-flush-danger">Danger</Button>
<Button className="btn-flush-warning">Warning</Button>
<Button className="btn-flush-light">Light</Button>
<Button className="btn-flush-dark">Dark</Button>
</>
);
}
export default FlushButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
| ClassNames | Values |
|---|---|
className="btn-flush-[Value]" | primary / success / warning / danger / info / light / dark |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Flush hover
Quickly create a general button with .btn-flush-* .flush-outline-hove/.flush-soft-hover/.btn-animated.
import React from 'react';
import { Button } from 'react-bootstrap';
const FlushHover = () => {
return (
<>
<Button className="btn-flush-primary">Primary</Button>
<Button className="btn-flush-secondary">Secondary</Button>
<Button className="btn-flush-info">Info</Button>
<Button className="btn-flush-success">Success</Button>
<Button className="btn-flush-danger">Danger</Button>
<Button className="btn-flush-warning">Warning</Button>
<Button className="btn-flush-light">Light</Button>
<Button className="btn-flush-dark">Dark</Button>
</>
);
}
export default FlushHover;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Animated buttons
use .btn-animated
import React from 'react';
import { Button } from 'react-bootstrap';
const AnimatedBtn = () => {
return (
<>
<Button className="btn-primary btn-animated">Button hover</Button>
<Button className="btn-outline-primary btn-animated">Button hover</Button>
<Button className="btn-soft-primary btn-animated">Button hover</Button>
<Button className="btn-flush-primary btn-animated">Button hover</Button>
<Button className="btn-gradient-primary btn-animated">Button hover</Button>
<Button variant="link" className="btn-animated">Button hover</Button>
<Button className="btn-success btn-animated">Button hover</Button>
</>
);
}
export default AnimatedBtn;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Outline buttons
For a lighter touch, Buttons also come in outline-* variants with no background color.
import React from 'react';
import {Button} from 'react-bootstrap';
const OutlinedBtn = () => {
return (
<>
<Button variant="outline-primary">Primary</Button>
<Button variant="outline-secondary">Secondary</Button>
<Button variant="outline-info">Info</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-danger">Danger</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-light">Light</Button>
<Button variant="outline-dark">Dark</Button>
</>
);
}
export default OutlinedBtn;
| Props | Type | Default | Description |
|---|---|---|---|
variant | string | 'primary' | "outline" versions (prefixed by 'outline-*') 'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'
|
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Rounded button
Create rounded buttons by simply adding .btn-rounded class.
import React from 'react';
import {Button} from 'react-bootstrap';
const RoundedBtn = () => {
return (
<>
<Button variant="primary" className="btn-rounded">Primary</Button>
<Button variant="secondary" className="btn-rounded">Secondary</Button>
<Button variant="info" className="btn-rounded">Info</Button>
<Button variant="success" className="btn-rounded">Success</Button>
<Button variant="outline-danger" className="btn-rounded">Danger</Button>
<Button variant="outline-warning" className="btn-rounded">Warning</Button>
<Button variant="outline-light" className="btn-rounded">Light</Button>
<Button variant="outline-dark" className="btn-rounded">Dark</Button>
</>
);
}
export default RoundedBtn;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Square button
use.btn-square
import React from 'react';
import {Button} from 'react-bootstrap';
const SquareBtn = () => {
return (
<>
<Button variant="primary" className="btn-square">Primary</Button>
<Button variant="outline-secondary" className="btn-square">Secondary</Button>
<Button variant="gradient-info" className="btn-square">Info</Button>
</>
);
}
export default SquareBtn;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Gradient buttons
Replace the default modifier class with the .btn-gradient-* once to create gradient button.
import React from 'react';
import {Button} from 'react-bootstrap';
const GradientBtn = () => {
return (
<>
<Button className="btn-gradient-primary">Primary</Button>
<Button className="btn-gradient-secondary">Secondary</Button>
<Button className="btn-gradient-info">Info</Button>
<Button className="btn-gradient-success">Success</Button>
<Button className="btn-gradient-danger">Danger</Button>
<Button className="btn-gradient-warning">Warning</Button>
<Button className="btn-gradient-light">Light</Button>
<Button className="btn-gradient-dark">Dark</Button>
</>
);
}
export default GradientBtn;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Floating buttons
Quickly create a raised button with .btn-floating.
import React from 'react';
import {Button} from 'react-bootstrap';
const FloatingBtns = () => {
return (
<>
<Button variant="primary" className="btn-floating">Primary</Button>
<Button variant="secondary" className="btn-floating">Secondary</Button>
<Button variant="info" className="btn-floating">Info</Button>
<Button variant="success" className="btn-floating">Success</Button>
<Button variant="danger" className="btn-floating">Danger</Button>
<Button variant="warning" className="btn-floating">Warning</Button>
<Button variant="light" className="btn-floating">Light</Button>
<Button variant="white" className="btn-floating">white</Button>
<Button variant="dark" className="btn-floating">Dark</Button>
<Button variant="flush-primary" className="btn-floating">Default hover</Button>
<Button variant="outline-primary" className="btn-floating">Default hover</Button>
</>
);
}
export default FloatingBtns;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Link buttons
Quickly create a link button with the variant="link".
import React from 'react';
import {Button} from 'react-bootstrap';
const LinkBtn = () => {
return <Button variant="link">button Link</Button>
}
export default LinkBtn;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Sizes
Fancy larger or smaller buttons? Add size=xl,lg,sm or xs for additional sizes.
import React from 'react';
import { Button } from 'react-bootstrap';
const ButtonSizes = () => {
return (
<>
<Button variant="secondary" size="lg">large</Button>
<Button variant="secondary">Default</Button>
<Button variant="secondary" size="sm">small</Button>
<Button variant="secondary" size="xs">mini</Button>
</>
);
}
export default ButtonSizes;
| Props | Type | Default | Description |
|---|---|---|---|
size | 'lg' | 'sm' | 'xs' | Specifies a large or small button. |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Block buttons
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.
import React from 'react';
import { Button } from 'react-bootstrap';
const BlockButtons = () => {
return (
<div className="d-grid gap-2">
<Button variant="primary">
Block level button
</Button>
<Button variant="secondary">
Block level button
</Button>
</div>
);
}
export default BlockButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Disabled State
Make buttons look inactive by adding the disabled boolean attribute to any <Button> element.
import React from 'react';
import { Button } from 'react-bootstrap';
const DisabledState = () => {
return (
<>
<Button variant="primary" disabled>Disabled primary</Button>
<Button variant="secondary" disabled>Disabled secondary</Button>
<Button variant="info" className="btn-rounded" disabled>Disabled info</Button>
<Button variant="success" className="btn-rounded" disabled>Disabled success</Button>
<Button variant="link" disabled>Disabled Link</Button>
</>
);
}
export default DisabledState;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Dropdown & dropup buttons
Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropup to the parent element.
import React from 'react';
import { Button, ButtonGroup, Dropdown } from 'react-bootstrap'
const DropdownButtons = () => {
return (
<>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary" id="dropdown-basic1">
Dropdown
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup} drop="up">
<Dropdown.Toggle variant="secondary" id="dropdown-basic2">
Dropup
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup} align="start">
<Dropdown.Toggle variant="secondary" id="dropdown-basic3">
Dropleft
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup} align="end">
<Dropdown.Toggle variant="secondary" id="dropdown-basic4">
Dropright
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="link" id="dropdown-basic5" className="btn-wth-icon">
<span className="feather-icon">
<Moon />
</span>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant="secondary" id="dropdown-basic6" className="btn-wth-icon">
<span><span className="icon">
<span className="feather-icon"><User /></span>
</span></span>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown as={ButtonGroup}>
<Button variant="secondary">Split dropdown</Button>
<Dropdown.Toggle split variant="secondary" id="dropdown-custom-2" />
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);
}
export default DropdownButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Buttons with Icons
Quickly create a Icon button with .btn .btn-* .btn-wth-icon .icon-leftor.btn .btn-* .btn-wth-icon .icon-right
import React from 'react';
import { Button } from 'react-bootstrap';
import { Moon } from 'react-feather';
const ButtonWithIcons = () => {
return (
<>
<Button variant="primary" size='lg' className="btn-custom">
<span>
<span className="icon"><span className="feather-icon"><Moon /></span> </span>
<span>Buy Jampack</span>
</span>
</Button>
<Button variant="secondary" className="btn-custom btn-rounded">
<span>
<span>Know More</span>
<span className="icon"><span className="feather-icon"><ArrowRightCircle /></span></span>
</span>
</Button>
<Button variant="dark" size="lg" className="btn-custom btn-wth-icon btn-rounded">
<span>
<span>View all demos</span>
<span className="icon"><span className="feather-icon"><ArrowRight /> </span></span>
</span>
</Button>
<Button variant="warning" size="sm" className="btn-custom btn-rounded">
<span>
<span>settings</span>
<span className="icon"><i className="fa fa-times" /> </span>
</span>
</Button>
<Button variant="success" className="btn-custom icon-wthot-bg btn-rounded">
<span>
<span>Next</span>
<span className="icon"><i className="fa fa-angle-right" /> </span>
</span>
</Button>
<Button variant="danger" size="sm" className="btn-custom icon-wthot-bg">
<span>
<span className="icon"><i className="fa fa-exclamation-triangle" /></span>
<span>caution</span>
</span>
</Button>
<Button variant="danger" size="xs" className="btn-custom icon-wthot-bg">
<span>
<span className="icon"><i className="fa fa-exclamation-triangle" /></span>
<span>caution</span>
</span>
</Button>
<Button variant="info" className="btn-custom btn-block">
<span>
<span className="icon"><FontAwesomeIcon icon={faFacebook} /></span>
<span>Login with facebook</span>
</span>
</Button>
<Button variant="primary" className="btn-custom btn-block">
<span>
<span className="icon"><FontAwesomeIcon icon={faTwitter} /></span>
<span>Login with Twitter</span>
</span>
</Button>
<Button variant="danger" className="btn-custom btn-block">
<span>
<span className="icon"><i className="fa fa-envelope" /> </span>
<span>Login with gmail</span>
</span>
</Button>
</>
);
}
export default ButtonWithIcons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Buttons with Icons sizes
Quickly create a general button with several predefined button styles, each serving its own semantic purpose.
import React from 'react';
import { Button } from 'react-bootstrap';
import { Moon } from 'react-feather';
const ButtonSizesWithIcons = () => {
return (
<>
<Button variant="primary" size="lg">
<span>
<span className="icon"><span className="feather-icon"><Moon /></span></span>
<span>Icon Button</span>
</span>
</Button>
<Button variant="primary">
<span>
<span className="icon"><i className="fa fa-bell" /></span>
<span>Icon Button</span>
</span>
</Button>
<Button variant="primary" size="sm">
<span>
<span>Icon Button</span>
<span className="icon"><i className="fa fa-bell" /></span>
</span>
</Button>
<Button variant="primary" size="xs">
<span>
<span>Icon Button</span>
<span className="icon"><i className="fa fa-bell" /></span>
</span>
</Button>
</>
);
}
export default ButtonSizesWithIcons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Icons buttons
Quickly create a icon button with .btn-icon
import React from 'react';
import { Button } from 'react-bootstrap';
import * as Icon from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const SocialButtons = () => {
return (
<>
<Button className="btn-social btn-social-facebook">facebook</Button>
<Button className="btn-icon btn-social btn-social-facebook"><span className="icon"><FontAwesomeIcon icon={Icon.faFacebook} /> </span></Button>
<Button className="btn-social btn-social-twitter">twitter</Button>
<Button className="btn-icon btn-social btn-social-twitter"><span className="icon"><FontAwesomeIcon icon={Icon.faTwitter} /></span></Button>
<Button className="btn-social btn-social-linkedin">linkedin</Button>
<Button className="btn-icon btn-social btn-social-linkedin"><span className="icon"><FontAwesomeIcon icon={Icon.faLinkedin} /></span></Button>
<Button className="btn-social btn-social-github">github</Button>
<Button className="btn-icon btn-social btn-social-github"><span className="icon"><FontAwesomeIcon icon={Icon.faGithub} /></span></Button>
<Button className="btn-social btn-social-youtube">youtube</Button>
<Button className="btn-icon btn-social btn-social-youtube"><span className="icon"><FontAwesomeIcon icon={Icon.faYoutube} /></span></Button>
<Button className="btn-social btn-social-gplus">google plus</Button>
<Button className="btn-icon btn-social btn-social-gplus"><span className="icon"><FontAwesomeIcon icon={Icon.faGooglePlus} /></span></Button>
<Button className="btn-social btn-social-instagram">instagram</Button>
<Button className="btn-icon btn-social btn-social-instagram"><span className="icon"><FontAwesomeIcon icon={Icon.faInstagram} /></span></Button>
<Button className="btn-social btn-social-dribbble">dribbble</Button>
<Button className="btn-icon btn-social btn-social-dribbble"><span className="icon"><FontAwesomeIcon icon={Icon.faDribbble} /></span></Button>
<Button className="btn-social btn-social-behance">behance</Button>
<Button className="btn-icon btn-social btn-social-behance"><span className="icon"><FontAwesomeIcon icon={Icon.faBehance} /></span></Button>
<Button className="btn-social btn-social-tumblr">tumblr</Button>
<Button className="btn-icon btn-social btn-social-tumblr"><span className="icon"><FontAwesomeIcon icon={Icon.faTumblr} /></span></Button>
<Button className="btn-social btn-social-pinterest">pinterest</Button>
<Button className="btn-icon btn-social btn-social-pinterest"><span className="icon"><FontAwesomeIcon icon={Icon.faPinterest} /></span></Button>
<Button className="btn-social btn-social-dropbox">dropbox</Button>
<Button className="btn-icon btn-social btn-social-dropbox"><span className="icon"><FontAwesomeIcon icon={Icon.faDropbox} /></span></Button>
<Button className="btn-social btn-social-skype">skype</Button>
<Button className="btn-icon btn-social btn-social-skype"><span className="icon"><FontAwesomeIcon icon={Icon.faSkype} /></span></Button>
<Button className="btn-social btn-social-flickr">flickr</Button>
<Button className="btn-icon btn-social btn-social-flickr"><span className="icon"><FontAwesomeIcon icon={Icon.faFlickr} /></span></Button>
</>
);
}
export default SocialButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Custom Buttons with Icons
use .btn .btn-custom .btn-[value]
import React from 'react';
import { Button } from 'react-bootstrap'
import { ArrowRight, ArrowRightCircle, Moon } from 'react-feather'
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const CustomButtons = () => {
return (
<>
<Button variant="primary" size='lg' className="btn-custom">
<span>
<span className="icon"><span className="feather-icon"><Moon /></span> </span>
<span>Buy Jampack</span>
</span>
</Button>
<Button variant="secondary" className="btn-custom btn-rounded">
<span>
<span>Know More</span>
<span className="icon"><span className="feather-icon"><ArrowRightCircle /></span></span>
</span>
</Button>
<Button variant="dark" size="lg" className="btn-custom btn-wth-icon btn-rounded">
<span>
<span>View all demos</span>
<span className="icon"><span className="feather-icon"><ArrowRight /> </span></span>
</span>
</Button>
<Button variant="warning" size="sm" className="btn-custom btn-rounded">
<span>
<span>settings</span>
<span className="icon"><i className="fa fa-times" /> </span>
</span>
</Button>
<Button variant="success" className="btn-custom icon-wthot-bg btn-rounded">
<span>
<span>Next</span>
<span className="icon"><i className="fa fa-angle-right" /> </span>
</span>
</Button>
<Button variant="danger" size="sm" className="btn-custom icon-wthot-bg">
<span>
<span className="icon"><i className="fa fa-exclamation-triangle" /></span>
<span>caution</span>
</span>
</Button>
<Button variant="danger" size="xs" className="btn-custom icon-wthot-bg">
<span>
<span className="icon"><i className="fa fa-exclamation-triangle" /></span>
<span>caution</span>
</span>
</Button>
<Button variant="info" className="btn-custom btn-block">
<span>
<span className="icon"><FontAwesomeIcon icon={faFacebook} /></span>
<span>Login with facebook</span>
</span>
</Button>
<Button variant="primary" className="btn-custom btn-block">
<span>
<span className="icon"><FontAwesomeIcon icon={faTwitter} /></span>
<span>Login with Twitter</span>
</span>
</Button>
<Button variant="danger" className="btn-custom btn-block">
<span>
<span className="icon"><i className="fa fa-envelope" /> </span>
<span>Login with gmail</span>
</span>
</Button>
</>
);
}
export default CustomButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Social buttons
Social buttons are same as icon buttons with .btn .btn-social.
import React from 'react';
import { Button } from 'react-bootstrap';
import * as Icon from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const SocialButtons = () => {
return (
<>
<Button className="btn-social btn-social-facebook">facebook</Button>
<Button className="btn-icon btn-social btn-social-facebook"><span className="icon"><FontAwesomeIcon icon={Icon.faFacebook} /> </span></Button>
<Button className="btn-social btn-social-twitter">twitter</Button>
<Button className="btn-icon btn-social btn-social-twitter"><span className="icon"><FontAwesomeIcon icon={Icon.faTwitter} /></span></Button>
<Button className="btn-social btn-social-linkedin">linkedin</Button>
<Button className="btn-icon btn-social btn-social-linkedin"><span className="icon"><FontAwesomeIcon icon={Icon.faLinkedin} /></span></Button>
<Button className="btn-social btn-social-github">github</Button>
<Button className="btn-icon btn-social btn-social-github"><span className="icon"><FontAwesomeIcon icon={Icon.faGithub} /></span></Button>
<Button className="btn-social btn-social-youtube">youtube</Button>
<Button className="btn-icon btn-social btn-social-youtube"><span className="icon"><FontAwesomeIcon icon={Icon.faYoutube} /></span></Button>
<Button className="btn-social btn-social-gplus">google plus</Button>
<Button className="btn-icon btn-social btn-social-gplus"><span className="icon"><FontAwesomeIcon icon={Icon.faGooglePlus} /></span></Button>
<Button className="btn-social btn-social-instagram">instagram</Button>
<Button className="btn-icon btn-social btn-social-instagram"><span className="icon"><FontAwesomeIcon icon={Icon.faInstagram} /></span></Button>
<Button className="btn-social btn-social-dribbble">dribbble</Button>
<Button className="btn-icon btn-social btn-social-dribbble"><span className="icon"><FontAwesomeIcon icon={Icon.faDribbble} /></span></Button>
<Button className="btn-social btn-social-behance">behance</Button>
<Button className="btn-icon btn-social btn-social-behance"><span className="icon"><FontAwesomeIcon icon={Icon.faBehance} /></span></Button>
<Button className="btn-social btn-social-tumblr">tumblr</Button>
<Button className="btn-icon btn-social btn-social-tumblr"><span className="icon"><FontAwesomeIcon icon={Icon.faTumblr} /></span></Button>
<Button className="btn-social btn-social-pinterest">pinterest</Button>
<Button className="btn-icon btn-social btn-social-pinterest"><span className="icon"><FontAwesomeIcon icon={Icon.faPinterest} /></span></Button>
<Button className="btn-social btn-social-dropbox">dropbox</Button>
<Button className="btn-icon btn-social btn-social-dropbox"><span className="icon"><FontAwesomeIcon icon={Icon.faDropbox} /></span></Button>
<Button className="btn-social btn-social-skype">skype</Button>
<Button className="btn-icon btn-social btn-social-skype"><span className="icon"><FontAwesomeIcon icon={Icon.faSkype} /></span></Button>
<Button className="btn-social btn-social-flickr">flickr</Button>
<Button className="btn-icon btn-social btn-social-flickr"><span className="icon"><FontAwesomeIcon icon={Icon.faFlickr} /></span></Button>
</>
);
}
export default SocialButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Badge on buttons
.position-top-end-overflow, .position-top-end-overflow-1.
import React from 'react';
import { Badge, Button } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { Bell } from 'react-feather';
const BadgeOnButtons = () => {
return (
<>
<Button className="btn-social btn-social-flickr position-relative">flickr<Badge bg="success" pill className="badge-sm position-top-end-overflow">12</Badge></Button>
<Button className="btn-social btn-social-flickr position-relative">flickr<Badge bg="success" pill className="badge-sm position-top-end-overflow">123+</Badge></Button>
<Button className="btn-social btn-rounded btn-social-flickr position-relative">flickr<Badge bg="success" pill className="badge-sm position-top-end-overflow-1">123+</Badge></Button>
<Button className="btn-social btn-social-flickr position-relative">flickr<Badge bg="success" pill className="badge-sm position-bottom-end-overflow">12</Badge></Button>
<Button variant="primary" className="btn-icon position-relative" href="#"><span className="icon"><span className="feather-icon"><Bell /> </span></span><Badge bg="success" pill className="badge-sm position-top-end-overflow">12</Badge></Button>
<Button variant="primary" className="btn-icon btn-rounded position-relative" href="#"><span className="icon"><span className="feather-icon"><Bell /> </span></span><Badge bg="success" pill className="badge-sm position-top-end-overflow-1">12</Badge></Button>
<Button variant="primary" className="btn-icon position-relative" href="#"><span className="icon"><span className="feather-icon"><Bell /> </span></span><Badge bg="success" pill className="badge-indicator position-top-end-overflow" /></Button>
<Button variant="primary" className="btn-icon btn-rounded position-relative" href="#"><span className="icon"><span className="feather-icon"><Bell /> </span></span><Badge bg="success" pill className="badge-indicator position-top-end-overflow-1" /></Button>
<Button variant="flush-primary" className="btn-icon btn-rounded">
<span className="icon">
<span className=" position-relative">
<FontAwesomeIcon icon={faGithub} />
<Badge bg="success" pill className="badge-indicator position-top-end-overflow" />
</span>
</span>
</Button>
</>
);
}
export default BadgeOnButtons;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Button Group Horizontal
Wrap a series of<Button>s in a <ButtonGroup>.
import React from 'react';
import { Button, ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap';
const HorizontalButtonGroup = () => {
return (
<>
<ButtonGroup aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
<ButtonGroup aria-label="Basic example2">
<Button variant="outline-secondary">today</Button>
<Button variant="outline-secondary">week</Button>
<Button variant="outline-secondary">month</Button>
<Button variant="outline-secondary">quater</Button>
<Button variant="outline-secondary">year</Button>
</ButtonGroup>
<ButtonGroup className="btn-group-rounded" aria-label="Basic example3">
<Button variant="outline-secondary">1H</Button>
<Button variant="outline-secondary">AR</Button>
<Button variant="outline-secondary">TD</Button>
<Button variant="outline-secondary">2K</Button>
<Button variant="outline-secondary">6M</Button>
</ButtonGroup>
<ButtonGroup aria-label="Button group with nested dropdown">
<Button variant="secondary">1</Button>
<Button variant="secondary">2</Button>
<DropdownButton as={ButtonGroup} variant="secondary" title="Dropdown" id="bg-nested-dropdown">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<ButtonGroup aria-label="Button group with nested dropdown">
<DropdownButton as={ButtonGroup} variant="outline-secondary" title="Dropdown" id="bg-nested-dropdown">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<Button variant="outline-secondary"><i className="fa fa-user" /></Button>
<Button variant="outline-secondary"><i className="fa fa-bell" /></Button>
</ButtonGroup>
</>
);
}
export default HorizontalButtonGroup;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Sizing
Instead of applying button sizing props to every button in a group, just add size prop to the <ButtonGroup>.
import React from 'react';
import { Button, ButtonGroup } from 'react-bootstrap';
const ButtonGroupSizing = () => {
return (
<>
<ButtonGroup size="lg" aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
<br />
<ButtonGroup aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
<br />
<ButtonGroup size="sm" aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
<br />
<ButtonGroup size="xs" aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
</>
);
}
export default ButtonGroupSizing;
| Props | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'lg' | Sets the size for all Buttons in the group. |
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Button Group Vertical
Make a set of buttons appear vertically stacked rather than horizontally, by adding vertical to the <ButtonGroup>. Split button dropdowns are not supported here..
import React from 'react';
import { Button, ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap'
const ButtonGroupVertical = () => {
return (
<>
<ButtonGroup vertical>
<Button variant="secondary">Button</Button>
<Button variant="secondary">Button</Button>
<DropdownButton
as={ButtonGroup}
variant="secondary"
title="Dropdown"
id="bg-vertical-dropdown-1"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<Button variant="secondary">Button</Button>
<Button variant="secondary">Button</Button>
<DropdownButton
as={ButtonGroup}
variant="secondary"
title="Dropdown"
id="bg-vertical-dropdown-2"
>
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</>
);
}
export default ButtonGroupVertical;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.