Design Style Guide
Purpose: Triggers an action and it can contain a label and/or an icon.
-
Four button styles:
-
Default, the general button style.
-
Primary, indicates the critical, or most important action on a form/page.
-
Warning, indicates an action that may have some side effects, such as giving a user admin access.
-
Danger, indicates a dangerous, generally destructive action, such as deleting.
-
-
Four different button sizes:
-
Large, use the btn-lg class.
-
Default, no extra classes necessary.
-
Small, use the btn-sm class.
-
Extra small, use the btn-xs class.
-
-
Use btn-icon-only for buttons with only an icon in it, optimizes padding.
-
Button can be grouped together to show associations and improve clarity. They can be sized using the btn-group-lg, btn-group-sm, and btn-group-xs classes.
-
Toggle buttons can be toggled between active or not active. Add the active class and the aria-pressed="true" attribute.
Purpose: A focused view is needed and disrupting the page flow is not prohibitive. Used for managing settings, editing/creating simple objects, or confirming an action.
- For interactions that are relatively quick.
- Use sparingly and consider if an in-page solution is better with a hide/show form/text. (Modals don't work well on tablet and mobile devises).
- Escape should close the window.
- Allow exiting by clicking on background (outside of modal window).
- Open modals with a click action.
- Clear and descriptive title which explains modal's purpose.
- Sentence case title.
- Dismiss (X) icon in top right.
- Contains text or UI controls focused on a particular task, process, or entity.
- Scroll independently depending on the content, creating a pinned header/footer.
-
Contains action buttons.
-
Primary action buttons are right aligned.
-
Cancel/previous buttons are left aligned.
-
Use button styles that match the actions/priority, but if there more than two buttons with similar actions/priority, use the default button style for them all.
-
Buttons should use action verbs that describe by themselves what will happen on click (e.g., ‘Delete user’ instead of ‘Ok’).
Purpose: Access additional related information or functionality without a change in context. Requires more text/info than a tooltip.
- Smaller contextual dialogs that are generally triggered by a click.
- Display information or functionality related to a particular item or control.
- Dismissed via a close icon, clicking the control that opened it, or by clicking anywhere outside of the popover.
- Content in a popover should be relatively short, but they can be scrollable if necessary.
- Should be positioned based on the screen space available.
- Not required.
- Clear and descriptive title which explains modal's purpose.
- Sentence case title.
- Dismiss (X) icon in top right.
-
Contains text or UI controls focused on a particular task, process, or entity.
-
Scroll independently depending on the content, creating a pinned header/footer.
Purpose: Flip (transition) between multiple focused panes/views of content because only one pane should be viewed at a time.
- Listed in a horizontal row.
- Avoid overflowing tab titles to new lines.
- Tab titles should be short and predictable.
Purpose: Need additional, optional information. Note, there is a custom refinery-tooltip directive available.
- Tooltips provide information when an element is hovered over.
- Tooltips are attached to an element and appear when the element is hovered over.
- The show and hide delays of a tooltip may vary depending on the need, but the default is 200ms to show and 0ms to hide.
- Tooltips cannot be interacted with.
- [USPTO Design Library Docs] (http://uspto.github.io/designpatterns/docs/)
- [Bootstrap Library] (http://getbootstrap.com/)
- [Angular UI Library] (https://angular-ui.github.io/bootstrap/)