Style Guide

Note

Unifying styles across the application is an ongoing process, we are working on making the site more consistent.

Button Guidelines

1. Buttons should follow the general color/icon scheme as outlined.
2. All buttons should have an icon on the left side of the button and text on the right.
3. Primary action buttons should be the default Vuetify styling.
4. Primary action buttons should be right aligned
5. Secondary buttons should be text or outlined. Text is preferred
6. Other buttons should generally be "info" or "primary" color and can take any style type depending on context

Button Colors and Icons

Type	Color	Icon
Default	info or primary	None
Create/New	success	mdi-plus or $globals.icons.create
Update/Save	success	mdi-save-content or $globals.icons.save
Edit	info	mdi-square-edit-outline or $globals.icons.edit

Example

<v-btn color="primary">
  <v-icon left> mdi-plus </v-icon>
  Primary Button
</v-btn>