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

Following is how you add the default button:

import { Button } from 'kodhus-ui-react';

<Button>Default button</Button>

The output of this will be following:

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.

import { Button } from 'kodhus-ui-react';

<Button color='primary'>Primary button</Button>
<Button color='primary-alt'>Primary alternative button</Button>
<Button color='secondary'>Secondary button</Button>
<Button color='error'>Error button</Button>
<Button color='gray'>Gray button</Button>

Rounded

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

import { Button } from 'kodhus-ui-react';

<Button corner='fully-rounded'>Fully rounded button</Button>
<Button corner='rounded'>Rounded button</Button>

The output of this will be following:

Different sizes

You can pass the size prop to the Button component as follow :

import { Button } from 'kodhus-ui-react';

<Button size='small'>Small button</Button>
<Button size='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:

import { Button } from 'kodhus-ui-react';

<Button color='primary' corner='rounded'>Primary rounded</Button>
<Button color='primary-alt' size='small'>Primary-alt small</Button>
<Button color='secondary' corner='fully-rounded'>Secondary fully rounded</Button>
<Button color='error'>Error button</Button>
<Button color='gray' corner='rounded' size='large'>Gray large rounded</Button>