Buttons

Buttons can be used in dialogs, forms and dashboard links and cards.

Usage

Kodhus provides different stylings for buttons. Let's start with the default version:

Default

To create a button, attach .cdt-btn as the class of your button as follow:

The output of this will be following:

<button class="cdt-btn">Button</button>
  

Flavors

You can attach following classes to get different colors based on your usecase. Whether it is a success button, a primary one, a button that leads to an important action, we have it all.

<button class="cdt-btn cdt-btn-primary">Primary button</button>
<button class="cdt-btn cdt-btn-primary-1">Primary-1 button</button>
<button class="cdt-btn cdt-btn-secondary">Secondary button</button>
<button class="cdt-btn cdt-btn-error">Error button</button>
<button class="cdt-btn cdt-btn-gray">Gray button</button>
          
        

Rounded

Kodhus library provide 2 versions of rounded buttons. A fully rounded one and a normal rounded (3px border-radius).

<button class="cdt-btn cdt-btn-full-rounded">Fully rounded button</button>  
<button class="cdt-btn cdt-btn-rounded">Rounded button</button>
          
        

The output of this will be following:

Different sizes

You can apply 2 class to get different sizes than normal. .cdt-btn-small and .cdt-btn-large like followings:

<button class="cdt-btn cdt-btn-small">Small button</button>  
<button class="cdt-btn cdt-btn-large">Large button</button>  
          
        

Cool buttons

Center outwards


Comes & goes


With arrows

Some Examples

Here are some of the example that you can make using Kodhus library:

<button class="cdt-btn cdt-btn-primary cdt-btn-rounded">Primary rounded</button>
<button class="cdt-btn cdt-btn-primary-1 cdt-btn-small">Primary-1 small</button>
<button class="cdt-btn cdt-btn-secondary cdt-btn-full-rounded">Secondary fully rounded</button>
<button class="cdt-btn cdt-btn-error">Error button</button>
<button class="cdt-btn cdt-btn-gray cdt-btn-large cdt-btn-rounded">Gray gray large rounded</button>