Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Types

Use any of the available button style types to quickly create a styled button. Just modify the btnStyle prop.

<>
	<Button>Default</Button>
	<Button btnStyle="primary" >Primary</Button> 
	<Button btnStyle="success" >Success</Button> 
	<Button btnStyle="danger" >Danger</Button> 
	<Button btnStyle="warning" >Warning</Button> 
	<Button btnStyle="simple" >Simple</Button> 
	<Button btnStyle="link" >Link</Button>
</>

Sizes

Larger or smaller buttons? Add size for additional sizes.

<>
	<Button size="large" >Large</Button> 
	<Button size="medium" >Medium</Button> 
	<Button size="small" >Small</Button>
</>

Disabled state

Make buttons look inactive by adding disabled prop.

<>
	<Button>Normal</Button>
	<Button disabled >Disabled</Button>
</>

Uppercase

Make button text uppercase by adding uppercase prop.

<>
	<Button>Normal</Button>
	<Button uppercase >Uppercase</Button>
</>

Block

Make button full-width by adding block prop.

<>
	<Button block >Block</Button>
</>

Icon

Add your favorite icon by using the icon prop.

<>
	<Button btnStyle="primary" icon="envelope-alt" >Primary</Button> 
	<Button btnStyle="success" icon="check-circle" >Success</Button> 
	<Button btnStyle="danger" icon="times-circle" >Danger</Button> 
	<Button btnStyle="warning" icon="exclamation-triangle" >Warning</Button> 
	<Button btnStyle="simple" icon="info-circle" >Simple</Button> 
	<Button btnStyle="link" icon="link" >Link</Button>
</>

API

import Button from "erxes-ui/lib/components/Button";

required prop

NAME	TYPE	DEFAULT	DESCRIPTION
children	React.ReactNode		Shows button text
className	string		Define className
onClick	function		Define click handler for button element
onMouseDown	function		Trigger fuction while mouse is clicked
href	string		Define a hyperlink
type	string	button	Define HTML button type attribute
btnStyle	primary , success , danger , warning , simple , link	default	One or more button style combinations
size	large, medium, small	medium	Specifies a large or small button
disabled	boolean	false	Disables the Button
ignoreTrans	boolean		Ignore translations
block	boolean	false	Make the button full-width
icon	string		Shows icon
style	any		Add custom style to button
id	string		Gives id to button
uppercase	boolean	false	Make the button text uppercase
target	string		Define the target