Page 4

All buttons

This page is an example on how to document your button components, most of the copy was written by AI so don’t take it very seriously.

Find the code for this page in the src/pages/components/buttons.md file.

  <button class="test">Primary</button>
  <button class="test">Primary</button>
  <button class="test">Primary</button>

    .test {
        background-color: red;
    }

Primary button

We use the primary button for main actions like saving a form or creating a new item.

<MainButton primary>Primary button</MainButton>

Secondary button

Secondary buttons accompany primary buttons to provide additional actions. For example, cancel buttons are secondary buttons.

<MainButton secondary>Secondary button</MainButton>

Text button

Text buttons are used for actions that do not require a primary or secondary button.

<MainButton text>Text button</MainButton>