Skip to content

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>