Skip to main content

Button

Basic Usage​

Loading...
function Demo() {

  return (

    <SpaceItems>

      <CButton label="Normal Button" />

      <CButton label="Outlined Button" outlined />

      <CButton label="Disabled Button" disabled />

      <CButton label="Rounded Button" rounded />

      <CButton label="Round Button" round />

      <CButton label="Flat Button" rounded flat />

    </SpaceItems>

  )

}
Fold/Expand Code

Themes​

Loading...
<SpaceItems>

  <CButton label="Primary" theme="primary" />

  <CButton label="Secondary" theme="secondary" />

  <CButton label="Warning" theme="warning" />

  <CButton label="Negative" theme="negative" />

  <CButton label="Primary" theme="primary" outlined />

  <CButton label="Secondary" theme="secondary" outlined />

  <CButton label="Warning" theme="warning" outlined />

  <CButton label="Negative" theme="negative" outlined />

  <CButton label="Primary" theme="primary" flat />

  <CButton label="Secondary" theme="secondary" flat />

  <CButton label="Warning" theme="warning" flat />

  <CButton label="Negative" theme="negative" flat />

</SpaceItems>
Fold/Expand Code

Sizes​

Loading...
<SpaceItems>

  <CButton label="xs size" size="xs" />

  <CButton label="sm size" size="sm" />

  <CButton label="md size (default)" size="md" />

  <CButton label="lg size" size="lg" />

  <CButton label="xl size" size="xl" />

</SpaceItems>
Fold/Expand Code

Block Button​

Loading...
<div>

  <div className="c-mb-md">

    <CButton label="Block Button" block size="lg" theme="warning" />

  </div>

  <div className="c-mb-md">

    <CButton label="Block Button" block size="lg" rounded />

  </div>

  <div>

    <CButton label="Block Button" block size="lg" round theme="negative" outlined />

  </div>

</div>
Fold/Expand Code

Loading​

Loading...
<SpaceItems>

  <CButton label="Submitting" size="sm" loading />

  <CButton label="Submitting" loading />

  <CButton label="Submitting" size="lg" loading />

  <CButton rounded label="Submitting" loading />

  <CButton rounded label="Submitting" loading outlined />

  <CButton round label="Submitting" loading />

  <CButton round outlined label="Submitting" loading />

</SpaceItems>
Fold/Expand Code

Customize Loading Icon​

Loading...
<SpaceItems>

  <CButton label="Submitting" loading customLoading={<CLoadingAudio />} />

  <CButton label="Submitting" outlined loading customLoading={<CLoadingCube />} />

</SpaceItems>
Fold/Expand Code

Icon Button​

Loading...
<SpaceItems>

  <CButton icon style={{ fontSize: '20px' }}>

    <CIcon content={MdIcons.matLightbulb} />

  </CButton>

  <CButton icon outlined style={{ fontSize: '32px' }}>

    <CIcon content={MdIcons.matHouse} />

  </CButton>

  <CButton icon outlined style={{ fontSize: '32px' }} theme="negative">

    <CIcon content={MdIcons.matPerson} />

  </CButton>

  <CButton icon style={{ fontSize: '56px' }} theme="secondary">

    <CIcon content={MdIcons.matSupervisedUserCircle} />

  </CButton>

  <CButton icon style={{ fontSize: '56px' }} theme="warning">

    <CIcon content={MdIcons.matDeviceHub} />

  </CButton>

</SpaceItems>
Fold/Expand Code

Props​

Name (*for required)DescriptionTypeDefault Value
No Data