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

iconBefore

iconAfter

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

Last updated