Button

Buttons are components which trigger desirable user interactions. They are easy to customize in terms of size, shape and color.

Examples of Basic Contrast Styles For Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

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="success">Success</CDBBtn>
          <CDBBtn color="danger">Danger</CDBBtn>
          <CDBBtn color="dark">Dark</CDBBtn>
          <CDBBtn color="warning">Warning</CDBBtn>
          <CDBBtn color="info">Info</CDBBtn>
    </CDBContainer>
  );
};

Circular Buttons

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="success" circle>
            Success
          </CDBBtn>
          <CDBBtn color="danger" circle>
            Danger
          </CDBBtn>
          <CDBBtn color="dark" circle>
            Dark
          </CDBBtn>
          <CDBBtn color="warning" circle>
            Warning
          </CDBBtn>
          <CDBBtn color="info" circle>
            Info
          </CDBBtn>
    </CDBContainer>
  );
};

Outline Buttons

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

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

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>
  );
};

Label at the side

Pro Component

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

Large Button ending with Text

Pro Component

import React from "react";
import { CDBBtn, CDBContainer } from "cdbreact";
export const Button = () => {
  return (
    <CDBContainer>
          <CDBBtn size="xl" color="primary" endingText="top-left">Primary</CDBBtn>
          <CDBBtn size="xl" color="secondary" endingText="top-right">Secondary</CDBBtn>
          <CDBBtn size="xl" color="success" endingText="bottom-left">Success</CDBBtn>
          <CDBBtn size="xl" color="danger" endingText="bottom-right">Danger</CDBBtn>
          <CDBBtn size="xl" color="dark" endingText="top">Dark</CDBBtn>
          <CDBBtn size="xl" color="warning" endingText="bottom">Warning</CDBBtn>
          <CDBBtn size="xl" color="info" endingText="center">Info</CDBBtn>
    </CDBContainer>
  );
};

Block Button

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

Buttons with Icons

Pro Component

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

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

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

API

In this section you will find advanced information about the Button component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Button Import Statement

You need to import the Contrast Button component first before using it. Import the Icon component if you need Icons.

import { CDBBtn, CDBIcon } from "cdbreact";

API Reference: Contrast Button Properties

The table below shows the configuration options of the CDBBtn component.

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" ... />

Checkbox

Collapse