Button

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

Class	Type
`button`	Button	A class representing a button

Types

In the Appwrite console, we use four types of buttons:

Class	Type
-	Primary	We recommend you use primary buttons for the principal call to action in a page or screen.
`is-secondary`	Secondary	Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”.
`is-text`	Text	Text buttons can be used to complete an action inside another component.
`is-only-icon`	Icon	Icon button with rounded corners


      <button class="button">

        <span class="text">Primary</span>

      </button>

      <button class="button is-secondary">

        <span class="text">Secondary</span>

      </button>

      <button class="button is-text">

        <span class="text">Text</span>

      </button>

      <button

        class="button is-only-icon"

        aria-label="Add new item"

      >

        <span class="icon-plus" aria-hidden="true"></span>

      </button>

      <button

        class="button is-text is-only-icon"

        style="--button-size:2.5rem;"

        aria-label="Remove item"

      >

        <span class="icon-x" aria-hidden="true"></span>

      </button>

Sizes

There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly.

class	Type
-	Medium	The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields.
`is-big`	Large	Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages.


      <button class="button"><span class="text">Medium</span></button>

      <button class="button is-big"><span class="text">Large</span></button>

Loading

If you include the loader component inside a button, you can have a loading button.

class
`is-loading`	Use to represent a loading state within the button


      <button id="loading-btn" class="button">

        <span class="text">Click me!</span>

        <div class="loader"></div>

      </button>

      <script>

        document.getElementById('loading-btn').addEventListener('click', () => {

            document.getElementById('loading-btn').classList.add('is-loading')

            setTimeout(() => {

              document.getElementById('loading-btn').classList.remove('is-loading')

            }, 2000)

          })

      </script>

Buttons With Icons

Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default.


      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-plus" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-cheveron-left" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="text">Button</span>

        <span class="icon-cheveron-right" aria-hidden="true"></span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-trash" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-duplicate" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-download" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

      <button class="button is-secondary" aria-label="Add new item">

        <span class="icon-external-link" aria-hidden="true"></span>

        <span class="text">Button</span>

      </button>

Buttons List


      <ul class="buttons-list u-margin-auto">

        <li class="buttons-list-item">

          <button class="button is-text"><span class="text">Button 1</span></button>

        </li>

        <li class="buttons-list-item">

          <button class="button is-text"><span class="text">Button 2</span></button>

        </li>

        <li class="buttons-list-item">

          <button class="button is-text"><span class="text">Button 3</span></button>

        </li>

        <li class="buttons-list-item">

          <button class="button is-text"><span class="text">Button 4</span></button>

        </li>

      </ul>

Best Practice

Tips to keep in mind to increase consistency and readability in buttons:

Do

Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word.

Don't

Avoid using specific icons, uppercase in every word and long sentences.