­čÄë
Windframe Form builder is finally here.

Button

React Bootstrap 5 Button

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 into your project to use the React Bootstrap 5 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

To give your button merely an outline, use the 'outline' 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="ml-1" />
Warning
</CDBBtn>
<CDBBtn color="info">
Info
<CDBIcon icon="magic" className="mr-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" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast