11.12.1

Buttons




Button

Button Variants


The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.

Button Full Width


This button is used many times for mobile or other things like cards and sidebars.

Button Links


Button Loading


Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading.

Button Block Content


Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a <span> element inside the button.

Button Icon Options


Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of iconRight in react or icon_right in rails.

Button Accessibility Options


Button Additional Options (onClick)


Button Size


By default button has the md size style, even if you don't explicitly pass a size prop.

Button Form Attribute


Button Toolbar

Default


Secondary


Circle Icon Button

Default


Click Handler


Link