Button

Props

Name	Type	Description
isDisabled	boolean	Disabled state
isLoading	boolean	Loading state
onClick	(event: SyntheticBaseEvent) => void	Click handler
shouldRender	boolean	Pass `false` if you don't want the component to appear
theme	...
type	React.ButtonHTMLAttributes<{}>['type']	Button type
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


<Button
  
>
  Hello World!
</Button>

Validation props

Name	Type	Description
form	string \| string[]	`Button` can be attached to a form or to several forms
onClick	(SubmitEvent) => void	Form submit handler. It does not work if the form has invalid fields
	interface SubmitEvent extends React.MouseEvent<HTMLButtonElement> { form?: { [formName: string]: { [fieldName: string]: Field, }, }, forms?: Form[], }	Submit event is a plain click event with `form` and `forms` fields being added. `form` and `forms` have the same form data structured differently. `form` is an object-like structure. `forms` gives the same data in an array-like structure. When the button is attached to several forms `form` is empty
onValidationFail	type ValidationFailEvent = React.MouseEvent<HTMLButtonElement> & { invalidForms: Form[] }	It fires when the button is clicked and the form has invalid fields. `onClick` handler does not start
	interface Form { name: string, fields: Field[], }
	interface Field { invalidMessages?: string[], isRequired: boolean, isValid: boolean, name: string, requiredMessage?: string, reset: () => void, setIsValid: SetState<boolean>, setMessages: SetState<string[] \| undefined>, suggestion?: Suggestion \| null, shouldValidateUnmounted: boolean, validators: ValidatorObject[], value: any, }	`Field` has all available data for a particular form field
scrollDelay	number	How many seconds the form should wait before scrolling to invalid fields
scrollOffset	number	How many pixels should be added between the screen top and the first invalid field
shouldScrollToInvalidFields	boolean	Scroll to invalid fields on button click