Search...

Button

React Bootstrap 5 Button (Contrast)

Users can interact with your website using the React Bootstrap 5 button. In terms of size, form, and color, they are simple to alter. They include a number of pre-defined button styles, each with its own semantic function and a few more controls.

Importing the React Bootstrap 5 Button component

You begin by importing the CDBButton component (Contrast) into your project to use the React Bootstrap Button component.

js
import { CDBBtn } from "cdbreact";

Default Buttons

The color prop affects the background color of the button.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary">Primary</CDBBtn>
<CDBBtn color="secondary">Secondary</CDBBtn>
<CDBBtn color="danger">Danger</CDBBtn>
<CDBBtn color="success">Success</CDBBtn>
<CDBBtn color="dark">Dark</CDBBtn>
<CDBBtn color="warning">Warning</CDBBtn>
<CDBBtn color="info">Info</CDBBtn>
</CDBContainer>
);
};

Circular Buttons

The 'circle' attribute is used on the React Bootstrap 5 buttons to make them more rounded.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary" circle>
Primary
</CDBBtn>
<CDBBtn color="secondary" circle>
Secondary
</CDBBtn>
<CDBBtn color="danger" circle>
Danger
</CDBBtn>
<CDBBtn color="success" circle>
Success
</CDBBtn>
<CDBBtn color="dark" circle>
Dark
</CDBBtn>
<CDBBtn color="warning" circle>
Warning
</CDBBtn>
<CDBBtn color="info" circle>
Info
</CDBBtn>
</CDBContainer>
);
};

Outline Buttons

Using the react bootstrap button, you can give your button merely an outline, by using the prop 'outline' on the button.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary" outline>
Primary
</CDBBtn>
<CDBBtn color="secondary" outline>
Secondary
</CDBBtn>
<CDBBtn color="success" outline>
Success
</CDBBtn>
<CDBBtn color="danger" outline>
Danger
</CDBBtn>
<CDBBtn color="dark" outline>
Dark
</CDBBtn>
<CDBBtn color="warning" outline>
Warning
</CDBBtn>
<CDBBtn color="info" outline>
Info
</CDBBtn>
</CDBContainer>
);
};

Circular Outline Buttons

To create the circular outline buttons, we'll use the React Bootstrap 5 components for buttons

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary" circle outline>
Primary
</CDBBtn>
<CDBBtn color="secondary" circle outline>
Secondary
</CDBBtn>
<CDBBtn color="success" circle outline>
Success
</CDBBtn>
<CDBBtn color="danger" circle outline>
Danger
</CDBBtn>
<CDBBtn color="dark" circle outline>
Dark
</CDBBtn>
<CDBBtn color="warning" circle outline>
Warning
</CDBBtn>
<CDBBtn color="info" outline circle>
Info
</CDBBtn>
</CDBContainer>
);
};

Flat Buttons

Give the 'CDBBtn' component the 'flat' attribute to create buttons without button shadows.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary" flat>
Primary
</CDBBtn>
<CDBBtn color="secondary" flat>
Secondary
</CDBBtn>
<CDBBtn color="success" flat>
Success
</CDBBtn>
<CDBBtn color="danger" flat>
Danger
</CDBBtn>
<CDBBtn color="dark" flat>
Dark
</CDBBtn>
<CDBBtn color="warning" flat>
Warning
</CDBBtn>
<CDBBtn color="info" flat>
Info
</CDBBtn>
</CDBContainer>
);
};

Buttons with Icons

Pro Component

In this tutorial we also use the CDBIcon component alongside the CDBButton component. The 'CDBIcon' component is nested within the 'CDBBtn' component. Our buttons now have icons associated with them as a result of this.

js
import React from "react";
import { CDBBtn, CDBIcon, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="warning">
<CDBIcon icon="magic" className="ms-1" />
Warning
</CDBBtn>
<CDBBtn color="info">
Info
<CDBIcon icon="magic" className="me-1" />
</CDBBtn>
</CDBContainer>
);
};

Button Sizes

Use the'size' attribute to specify how big or small your button should be.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="primary" size="large">
Large button
</CDBBtn>
<CDBBtn color="secondary">Normal button</CDBBtn>
<CDBBtn color="success" size="small">
Small button
</CDBBtn>
</CDBContainer>
);
};

Disabled Buttons

To disable your button, use the 'disabled' property.

js
import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
return (
<CDBContainer>
<CDBBtn color="secondary" disabled>
Disabled Button
</CDBBtn>
</CDBContainer>
);
};

Contrast React Bootstrap 5 Button Props

The props you get to use with the React Bootstrap 5 Button component will be expanded upon in this section. You'll learn what these props do, how to utilize them in your code, and what their default values are.

Other prop possibilities for the 'CDBButton' component are included in the table below.

NameTypeDefaultDescriptionExample
actionBooleanfalseAdds btn-action class, works with Cards<CDBBtn action ... />
activeBooleanfalseAdds active class<CDBBtn active ... />
blockBooleanfalseCreate block level buttons<CDBBtn block ... />
circleBooleanfalseAdds btn-circle class, works with stepper<CDBBtn circle ... />
classNameStringAdds custom classes<CDBBtn className="custom-class" ... />
colorStringprimaryDetermines button color, accepts CDB predefined color classes<CDBBtn color="secondary" ... />
disabledBooleanfalseDisables button from being clicked<CDBBtn disabled ... />
downloadStringAdds download attribute with provided url<CDBBtn download="https://link_to_your_file.com" ... />
endingTextStringPositions the button text in one of the selected positions. These positions include top-left, top-right, bottom-left, bottom-right, top, bottom, center.<CDBBtn endingText="center" ... />
flatBooleanfalseAdds flat effect to button. That is button without background and borders<CDBBtn flat ... />
innerReffunction or StringAllows to pass Ref string, which will attach to rendered button or a DOM element<CDBBtn innerRef="buttonRef" ... />
labelStringPositions button text left or right.<CDBBtn label="left" ... />
onClickfunctionWill call a function when the button is clicked<CDBBtn onClick={yourFunction} ... />
roleStringAdds role attribute to button<CDBBtn role="...." ... />
sizeStringmediumDetermines button size, available values: [small, large].<CDBBtn size="large" ... />
socialStringAdds a social media icon.<CDBBtn social="fb" ... />
tagStringbuttonChanges default tag<CDBBtn tag="a" ... />
targetString_selfIf used as link, sets target attribute<CDBBtn href="..." target="_blank" ... />
typeStringbuttonAdds type attribute to button<CDBBtn type="submit" ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.