buttons.md

Buttons

Buttons are used to perform actions in the product.

Default

{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false&viewMode=story" %}

{% hint style="info" %} Good to know: you can embed a Storybook canvas by simple pasting the canvas link and hitting enter. {% endhint %}

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

Primary

{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:primary&viewMode=story" %}

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

Secondary

{% embed url="https://5ccbc373887ca40020446347-geedzbiswp.chromatic.com/iframe.html?id=button--basic&args=size:medium;containsIcon:false;appearance:secondary&viewMode=story" %}

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

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