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 the disabled prop to.

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

Uppercase#

Make button text uppercase by adding the uppercase prop to.

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

Block#

Make button full-width by adding the block prop to.

<>
<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";
NameTypeDefaultDescription
hrefstringDefines a hyperlink
typestringbuttonDefines 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
blockbooleanfalseMakes the button full-width
iconstringShows icon
uppercasebooleanfalseMakes the button text uppercase
Last updated on by zulaann