Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
||Button||A class representing a button|
In the Appwrite console, we use four types of buttons:
|-||Primary||We recommend you use primary buttons for the principal call to action in a page or screen.|
||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”.|
||Text||Text buttons can be used to complete an action inside another component.|
||Icon||Icon button with rounded corners|
There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly.
|-||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.|
||Large||Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages.|
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.
Tips to keep in mind to increase consistency and readability in buttons:
Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word.
Avoid using specific icons, uppercase in every word and long sentences.