Skip to main content

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

NameTypeDefaultDescription
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