Button Vue Components

In order to keep the styling and logic of buttons consistent, Emmie uses custom button Vue components around the webapp.

Usage

The following button components will with very few exceptions cover all use-cases within Emmie. They are pre-styled and ready to use, though do note that some of the later "Special Buttons" require a v-model and/or prop to function.

General Buttons

These buttons will cover most use-cases that you would expect a generic button element to serve. Under "General Buttons" we understand:

• PrimaryButton
  • Is used for high-priority tasks such as creation and submitting.
• PrimaryOutlineButton
  • Is for medium priority tasks like editing or downloading.
• SecondaryButton
  • Used for lower priority tasks such as adding a personal note to a client or adjusting settings.
• SecondaryOutlineButton
  • This is not used much, as at this point tasks are such a low priority they are indistinguishable from LightButtons.
• LightButton
  • Generic buttons which have no real priority and fit the role of a standard button.
• DangerButton
  • Used for risky tasks such as deletion. If you use this button it's good practice to follow it up with a confirmation modal.

Special Buttons

Special buttons are buttons with very specific use-cases or that have logic within them to facilitate a better workflow. Under "Special Buttons" we understand:

• LinkButton
  • Goes in place of links that won't actually go to another page such as javascript:void or href="#". They can also be used instead of LightButtons if they stylistically fit better.
• IconButton
  • Buttons where the "text" in the button itself is a single icon. It will accept any of the icons within frontend/apps/constants/icons.ts as a prop.
  • IconButtons are used to save space in both code and the site itself. However, if a button is more than just a single icon you should use a general button together with a FontAwesomeIcon component instead.
• FormControlButton
  • Serves as text-input activations, as having several inactive textareas in a single page can look rather busy.
• DropdownButton
  • Is for controlling dropdown menu displays. They must always have a boolean ref as a prop as it controls the up and down arrow to signify whether or not the dropdown menu is actually open.
• SwitchButtons
  • These are a pair of buttons where one is always active, it is used for swapping between 2 values within a page, like views within it.
  • You must give the v-model a boolean to work with so the button can switch its selected button. The buttons are defined by a pair of slots, #firstbutton and #secondbutton.
• ButtonRow
  • Is effectively a longer form of the SwitchButton, and is for swapping between several values within a page such as modes or views.
  • It uses a v-model string for the currently selected button and an array of strings as a prop for the text within its buttons. Each array entry is one button.
• BaseButton
  • Used more as a "template" for one-off buttons that require special styling. It should be your last resort if none of the buttons above fit your use-case.

ButtonRow and SwitchButton have a secondary prop that when given will switch them to a secondary styling for lower priority buttons.

Exceptions

When no button fits your use-case, you can create a new component. If this component has a wider use-case you can put the new component in frontend/apps/shared/components/buttons. If you added this new button component there make sure to update this guide as well. If the new component has a very specific use-case, it's best to put the new component in the relevant domain's components folder. Whether or not the new component uses an HTML button element or BaseButton component as its template is up to you.