Button

Buttons are used to perform actions in the product.

Default

https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false&viewMode=story5ccbc373887ca40020446347-geedzbiswp.chromatic.com

Good to know: you can embed a Storybook canvas by simple pasting the canvas link and hitting enter.

<Button
    label="Label"
    size="medium"
    kind="default"
    onClick={doTheThing}
/>

Primary

https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:primary&viewMode=story5ccbc373887ca40020446347-geedzbiswp.chromatic.com

<Button
    label="Label"
    size="medium"
    kind="primary"
    onClick={doTheThing}
/>

Secondary

https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:secondary&viewMode=story5ccbc373887ca40020446347-geedzbiswp.chromatic.com

<Button
    label="Label"
    size="medium"
    kind="secondary"
    onClick={doTheThing}
/>

These examples are taken from the excellent Storybook Example Design System.