Button Components

Versatile button component.

Button

Usage

Example

Sizes:

Styles:

Script


  return (
    <>
      Sizes:
      {['sm', '', 'lg'].map((size, rowKey)=>{
        return (
          <CRow key={rowKey + 'sizes'} className="d-flex justify-content-between">
            {
              ['success', 'primary', 'info', 'warning', 'danger'].map((color, key)=>{
                return (
                  <CButton
                  key={color + size}
                  color={color}
                  size={size}
                  className="m-2"
                >
                  {color}
                </CButton>
              )})
            }
          </CRow>
        )})}
        Styles:
        {[{ shape: 'square' }, { shape: 'pill' }, { variant: 'ghost' }, { variant: 'outline' }].map((style, rowKey)=>{
          return (
            <CRow key={rowKey + 'sizes'} className="d-flex justify-content-between">
              {
                ['success', 'primary', 'info', 'warning', 'danger'].map((color, key)=>{
                  return (
                    <CButton
                    key={key}
                    color={color}
                    {...style}
                    className="m-2"
                  >
                    {color}
                  </CButton>
                )})
              }
            </CRow>
          )})}
    </>
  )

# Button API

Name	Type	Default Value
tag	any	button
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
active	boolean
active state
block	boolean
applies the block style.
shape	string
shape of the button; vailable shapes: 'square', 'pill'.
variant	(ghost \| outline)
additional variant of the button; available variants: 'ghost', 'outline'.
color	string
sets the background color.
disabled	boolean
disabled button
onClick	Function
onClick event user action
size	string
sets size of button; available sizes: 'sm', 'lg'
pressed	boolean
button pressed state

ButtonGroup

Usage

Example

Script


  return (
    <>
      <CButtonGroup>
        <CButton color="success">Button</CButton>
        <CButton color="info">Button</CButton>
        <CButton color="primary">Button</CButton>
      </CButtonGroup>
    </>
  )

Wrapper component for button groups.

# ButtonGroup API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
size		(sm \| lg)
size of buttons
vertical		boolean
vertical type of group

ButtonToolbar

Usage

Example

Standard toolbar:
Justified toolbar:

Script


  return (
    <>
      Standard toolbar:
      <CButtonToolbar>
        <CButton color="success">Button</CButton>
        <CButton color="info">Button</CButton>
        <CButton color="primary">Button</CButton>
      </CButtonToolbar>
      <br />
      Justified toolbar:
      <CButtonToolbar justify="between">
        <CButton color="success">Button</CButton>
        <CButton color="info">Button</CButton>
        <CButton color="primary">Button</CButton>
      </CButtonToolbar>
    </>
  )

Simple button toolbar component.

# ButtonToolbar API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
role		string
role attribute (toolbar by default)
justify		(start \| end \| between \| center)
justify-content-* class

ButtonClose

Usage

Example

Script


  return (
    <CRow>
      <CCol cols="1">
        <CButtonClose/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="bg-primary close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="bg-info close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="bg-success close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="bg-warning close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="bg-danger close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="text-primary close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="text-info close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="text-success close"/>
      </CCol>
      <CCol cols="1">
        <CButtonClose buttonClass="text-danger close"/>
      </CCol>

      <CCol cols="2">
        <CButtonClose buttonClasses="text-white close bg-primary p-1">
          Close
        </CButtonClose>
      </CCol>
    </CRow>
  )

# ButtonClose API

Name	Type	Default Value
children	any
children components
className	string
user classes for the main HTML tag
buttonClass	string	close
innerRef	(object \| Function \| string)
ref to the main tag