Code

Button API

This component extends the native <button> API. That's why the type prop is not included in the table..

children	ReactNode	❌
variant	'base' | 'primary' | 'secondary' | 'ghost' | 'danger' | 'dangerAlt' | 'inverted' | 'invertedAlt';	❌
size	'default' | 'large' | 'small';	❌
iconOnly	AvailableTelicon	❌
iconBefore	AvailableTelicon	❌
iconAfter	AvailableTelicon	❌
isDisabled	boolean	❌
isSelected	boolean	❌
isLoading	boolean | 'before' | 'after';	❌
iconSpacing	string	❌
scaleWhileActive	boolean	❌

children

A string or an HTML structure passed as child.

variant

Controls the stylistic state of the button.

size

Controls the size of the button.

iconOnly, iconBefore and iconAfter

iconOnly is used when you only want to render an icon as a button. iconBefore renders a button on the right side of the text, and iconAfter renders the icon right to the text.

isDisabled and isSelected

Controls the enabled or disabled state of the component. isSelected controls if the button shows a selected state on the button.

isLoading

Used to set a loading state to a button. You can control if its only a button or if its shown before or after the children.

iconSpacing

Controls the gap between the icon and the child. This should be a string, so you can control it just as if it was CSS.

scaleWhileActive

This prop changes the scale while active.

Example

Live Demo

Code Sandbox