button.md

Button

Source

Buttons initiate actions, can include a title or an icon and come with a set of predefined styles.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Button } from 'chayns-components';

// ...

<Button {...} />

Props

The Button-component takes the following props:

Name	Type	Default	Required
children	ReactNode		✓
chooseButton	boolean	false
disabled	boolean	false
onClick	function
className	string
icon	string | object
secondary	boolean	false
stopPropagation	boolean	false
type	enum	'button'

children

children: ReactNode;

String or components that are rendered inside of the button.

---

chooseButton

chooseButton?: boolean

Renders the button on the "ChooseButton"-style. Alternatively use the ChooseButton-component.

---

disabled

disabled?: boolean

Renders the button as disabled and disables click events.

---

onClick

onClick?: function

Will be called after the button has been clicked with the event as the first parameter.

---

className

className?: string

String of classnames that should be added to the button.

---

icon

icon?: string | object

An optional icon that is displayed on the left of the button. Supply a FontAwesome icon like this: "fa fa-plane"

---

secondary

secondary?: boolean

Render the button in a secondary style.

---

stopPropagation

stopPropagation?: boolean

Stop the event propagation on click.

---

type

type?: enum

Set the type for the native button HTML element.