Skip to main content


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



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

<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>


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 disabled >Disabled</Button>


Make button text uppercase by adding uppercase prop.

<Button uppercase >Uppercase</Button>


Make button full-width by adding block prop.

<Button block >Block</Button>


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>


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

* required prop

childrenReact.ReactNodeShows button text
classNamestringDefine className
onClickfunctionDefine click handler for button element
onMouseDownfunctionTrigger fuction while mouse is clicked
hrefstringDefine a hyperlink
typestringbuttonDefine HTML button type attribute
btnStyleprimary | success | danger | warning | simple | linkdefaultOne or more button style combinations
sizelarge | medium | smallmediumSpecifies a large or small button
disabledbooleanfalseDisables the Button
ignoreTransbooleanIgnore translations
blockbooleanfalseMake the button full-width
iconstringShows icon
styleanyAdd custom style to button
idstringGives id to button
uppercasebooleanfalseMake the button text uppercase
targetstringDefine the target
Last updated on by enkhzule