Button

Props

ReactNode

string

'_blank' | '_self' | '_parent' | '_top'

'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'link'

'small' | 'medium' | 'large'

'button' | 'submit' | 'reset'

boolean

boolean

MouseEventHandler<​HTMLButtonElement​>

Examples

Basic

1import { Button } from '@cergmin/components';
2
3<Button>Button</Button>;

Different styles

1import { Button } from '@cergmin/components';
2
3<Button appearance="primary">Primary</Button>
4<Button appearance="secondary">Secondary</Button>
5<Button appearance="success">Success</Button>
6<Button appearance="danger">Danger</Button>
7<Button appearance="warning">Warning</Button>
8<Button appearance="link">Link</Button>

With icon

You can add icons to the buttons. SVG icons would have the same color as text.

1import { Button } from '@cergmin/components';
2import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
4<Button appearance="danger">
5  <FontAwesomeIcon icon="fa-solid fa-trash-can" />
6  <span>Delete</span>
7</Button>
8<Button appearance="warning">
9  <FontAwesomeIcon icon="fa-solid fa-bolt" />
10</Button>
11<Button>
12  <span>Share</span>
13  <FontAwesomeIcon icon="fa-solid fa-share" />
14</Button>

Sizes

1import { Button } from '@cergmin/components';
2
3<Button size="small">Small</Button>
4<Button size="medium">Medium</Button>
5<Button size="large">Large</Button>

States

1import { Button } from '@cergmin/components';
2
3<Button loading>Loading</Button>
4<Button disabled>Disabled</Button>

Links

1import { Button } from '@cergmin/components';
2
3<Button href="https://yandex.com">Link</Button>
4<Button href="https://yandex.com" target="_blank">
5  External link
6</Button>