Button

Some features in this component requires CDB React Pro package.Clickhereto try it out.

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.

import { CDBBtn } from "cdbreact";

Default Buttons

The color prop affects the background color of the button.

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.

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.

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

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.

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.

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.

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.

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.

Name	Type	Default	Description	Example
action	Boolean	false	Adds `btn-action` class, works with Cards	`<CDBBtn action ... />`
active	Boolean	false	Adds active class	`<CDBBtn active ... />`
block	Boolean	false	Create block level buttons	`<CDBBtn block ... />`
circle	Boolean	false	Adds `btn-circle` class, works with stepper	`<CDBBtn circle ... />`
className	String		Adds custom classes	`<CDBBtn className="custom-class" ... />`
color	String	primary	Determines button color, accepts CDB predefined color classes	`<CDBBtn color="secondary" ... />`
disabled	Boolean	false	Disables button from being clicked	`<CDBBtn disabled ... />`
download	String		Adds download attribute with provided url	`<CDBBtn download="https://link_to_your_file.com" ... />`
endingText	String		Positions 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" ... />`
flat	Boolean	false	Adds flat effect to button. That is button without background and borders	`<CDBBtn flat ... />`
innerRef	function or String		Allows to pass Ref string, which will attach to rendered button or a DOM element	`<CDBBtn innerRef="buttonRef" ... />`
label	String		Positions button text `left` or `right`.	`<CDBBtn label="left" ... />`
onClick	function		Will call a function when the button is clicked	`<CDBBtn onClick={yourFunction} ... />`
role	String		Adds role attribute to button	`<CDBBtn role="...." ... />`
size	String	medium	Determines button size, available values: `[small, large]`.	`<CDBBtn size="large" ... />`
social	String		Adds a social media icon.	`<CDBBtn social="fb" ... />`
tag	String	button	Changes default tag	`<CDBBtn tag="a" ... />`
target	String	_self	If used as link, sets target attribute	`<CDBBtn href="..." target="_blank" ... />`
type	String	button	Adds 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.

Checkbox

Collapse