Main Action Buttons

Main Button - Spacing

Main Action buttons appear in the action bar. These buttons are generally to start an action like exporting or importing a list, creating a new event or series.


Main Button - Navigation
/* [ Main Button ] */
.action-nav-bar .btn-group .add {
  color: #FFFFFF;
  background-color: #39c985;
  background-image: linear-gradient(#39c985, #2d9b67);
  border: 1px solid #193043;
}


Main Button - Modal
/* [ Modal Button - Accept ] */
.modal a {
  color: #FFFFFF;
  background-color: #39c985;
  background-image: linear-gradient(#39c985, #2d9b67);
  border: 1px solid #20724b;
}


Cancel Button - Modal
/* [ Modal Button - Cancel / Return ] */
.modal a.cancel {
  color: #666666;
  background-color: #FFFFFF;
  background-image: linear-gradient(#FFFFFF, #f7f7f7);
  border: 1px solid #c9d0d3;
}


Action buttons

Action buttons are used to allow the user to control steps in a process. Usually placed within a table view, actions include options to delete, process and view statistics. These action buttons will generally open a modal and should be placed in a specific hierarchical order for consistency.

  1. Detail Actions
  2. Sub Actions
  3. Delete Actions
More Information Edit Time Preview Plus Play Play Active Remove