Button

Custom buttons with different types and sizes are available.

Types

Use any of the available buttons by changing the type prop.

import React from 'react';
import { Button } from 'chic-ui';

<Button>Default</Button>
<Button type='secondary'>Secondary</Button>
<Button type='warning'>Warning</Button>
<Button type='success'>Success</Button>
<Button type='danger'>Danger</Button>
<Button type='light'>Light</Button>
<Button type='info'>Info</Button>

Sizes

Get small or large buttons easily by using the size prop.

import React from 'react';
import { Button } from 'chic-ui';

<Button size="small">Small</Button>
<Button>Default</Button>
<Button size="large">Large</Button>

Disabled Buttons

Use the disabled prop to disable any button.

import React from 'react';
import { Button } from 'chic-ui';

<Button disabled>Disabled</Button>
<Button disabled type='success'>Disabled</Button>

Loading

You can use the buttons to show any loading actions using the loading prop.

import React from 'react';
import { Button } from 'chic-ui';

<Button loading />
<Button loading type='secondary'/>

Icons

Icons can be used within the buttons either by using icon prop or as children.

import React from 'react';
import { Button } from 'chic-ui';

<Button icon={BiWine} type="light">
White wine!
</Button>

<Button type='danger'>
Red wine! <BiWine color="white" />
</Button>

API

import { Button } from 'chic-ui';

Name	Type	Default	Description
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'primary'	Color of the button
size	'small' | 'default' | 'large'	'default'	Size of the button
icon	ElementType		Add icons to the buttons
children	ReactNode		Pass children
disabled	boolean	false	Disable a button
loading	boolean	false	Loading button
href	string		If `href` is added, button becomes an anchor link
as	ElementType		If `as` is added, button becomes a custom html node specified in `as`
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component