Using the Material Design component documentation as a guide, use only outlined and contained buttons. These buttons styles are outlined which helps to make it obvious to the user that they are clickable buttons. The contained button (also called high emphasis) should only be used for one button in a given view to distinguish the primary action (for example, in a search form, the Search button would be styled as a contained button).
Also in keeping with Material Design, all button text labels should be uppercase.
The accent color should be used for all buttons. However red can be used for actions that are destructive and irreversible, such as buttons that result in deleting database records.
Also known as medium emphasis.
Code sample:
<button mat-stroked-button color="accent" (click)="onClick()">
<mat-icon class="material-icons">clear_all</mat-icon> Clear Selection
</button>Also known as high emphasis. Only use this style for the one main button in a view.
Code sample:
<button mat-raised-button color="primary" (click)="doSearch()">
<mat-icon class="material-icons">search</mat-icon> Search
</button>Don't use an icon for utility buttons, for example cancel or close buttons that merely dismiss a dialog.
- for adding an item
<mat-icon class="material-icons">add_circle</mat-icon>
- for deleting an item
<mat-icon class="material-icons">remove_circle</mat-icon>
- for editing an item
<mat-icon class="material-icons">edit</mat-icon>
- for submitting a form
<mat-icon class="material-icons">send</mat-icon>
User notifications come in two flavors: toast (or snackbar) notifications and modal dialogs. Toast notifications should be used only when the user doesn't need to take any action based on the message. If the user needs to take some sort of action, then a modal dialog is more appropriate. For example, if the user resets their password and they need to check their email for a reset link, that would be appropriate for a modal dialog since a user might not see or read in time a toast notification. An example of a good use of a toast notification is when the user's form submission is successfully saved.
Use a modal dialog to have the user confirm any irreversible action such as a delete of a record that the user won't be able to undo.
- For data entry: MM/DD/YYYY
- example: 01/12/2021
- This is the default format for the Angular Material Datepicker
- For display: Month short name DD, YYYY
- example: Jan 12, 2021
- in Angular, this is the "mediumDate" format (https://angular.io/api/common/DatePipe#pre-defined-format-options)
<span>{{ aDate | date:'mediumDate' }}</span>
- When displayed in table columns, a more abbreviated format is allowed, MM/DD/YY
- example: 01/12/21
- in Angular this is the "shortDate" format
<span>{{ aDate | date:'shortDate' }}</span>
| Element | Color |
|---|---|
| HOME | |
| - WHISPers Banner | #050921 |
| - Navigation Menu | #182042 |
| MAP | |
| (new animal type symbology) | |
| - mammal | #fc3c4f |
| - bird | #fcdc76 |
| - reptile/amphibian | #25b9aa |
| - fish | #85e4fa |
| - other | #a06ff9 |
| - multiple types | #a7a9b2 |
| (old diagnosis type based symbology) symbols | |
| - bacteria | #25b9aa |
| - fungus | #3092f4 |
| - nut/met/dev | #fc3c4f |
| - other | #fb833c |
| - parasite | #6fcdc76 |
| - toxin | #a06ff9 |
| - trauma | #ffb3ff |
| - virus | #85e4fa |
| Multiple Events | #a7a9b2 |
| flyways (outline, background) | |
| atlantic | #28995b , #c6ddd0 |
| central | #b43cc7 , #e2cae6 |
| mississippi | #eb5834 , #edd0c8 |
| pacific | #ffbd4f , #f1e4ce |
| HUCs | #b57dcf |
| EVENT DETAILS MAP | |
| county poly | #00f , #9ca8ba |
| flyways | same as main map |
| HUCs | same as main map |
| GLOBALS | |
| background color | #ffffff |
| text | #313b57 |
| buttons | |
| - blue | #304ffe |
| - white | #ffffff |
| table header row | #eeeef8 |
| table rows | #e8f5e9 , #f7f7ff (alternating colors) |
- Dialogs
- for dialogs the bottom buttons should be right aligned, with the main button right most
- Forms
- in general one needs to look at how the form will be scanned by the user. If the form is left aligned and a single column (labels above input fields), then a left aligned submit button at the end of the form is most appropriate.