ButtonToolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Example

ButtonToolbar example.

import React from "react";
import { CDBBtnTb, CDBBtn, CDBBtnGrp, CDBContainer } from "cdbreact";
export const ButtonToolbar = () => {
  return (
    <CDBContainer>
      <CDBBtnTb>
        <CDBBtnGrp className="mr-2">
          <CDBBtn color="primary">click me</CDBBtn>
          <CDBBtn color="secondary">click me</CDBBtn>
          <CDBBtn color="success">click me</CDBBtn>
        </CDBBtnGrp>
        <CDBBtnGrp size="sm" className="mr-2">
          <CDBBtn color="primary">click me</CDBBtn>
          <CDBBtn color="secondary">click me</CDBBtn>
          <CDBBtn color="success">click me</CDBBtn>
        </CDBBtnGrp>
        <CDBBtnGrp >
          <CDBBtn color="danger">click me</CDBBtn>
          <CDBBtn color="dark">click me</CDBBtn>
          <CDBBtn color="warning">click me</CDBBtn>
        </CDBBtnGrp>
      </CDBBtnTb>
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the ButtonToolbar 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 ButtonToolbar Import Statement

You need to import the Contrast ButtonToolbar component first before using it and any other needed component.

import { CDBBtnTb, CDBBtn, CDBBtnGrp, CDBContainer } from "cdbreact";

API Reference: Contrast ButtonToolbar Properties

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