Description
A widget is a self-contained entity that is designed to work within a workspace.
 |
Usage & Behavior
General guidelines
Structure
A widget consists of:
Header, which includes:
Widget name, with or without additional information. In some cases, this may be replaced by Tabs. See Internal Logic below.
Widget controls (optional), including Icon Buttons and/or an Action Menu.
Content area.
Widget controls
Includes only actions that are related to the widget (such as expand/collapse, maximize, delete, configure, etc.). Content-related actions will be presented within the content area.
The action area should include up to 3 elements, including:
Icon Buttons, usually used for primary actions.
Action Menu, usually used for secondary actions. Where there are no primary actions, all actions may be presented in the actions menu (without any icon buttons).
Placement and Positioning
A widget can be placed anywhere on a page.
Content
Widget Title
The widget name will be aligned to the left.
Additional information (if exists) will be aligned to the widget name, separated by a line separator.
Where space is constrained, the widget name and the additional information will be truncated. In this case, the full information (both name and additional information) will be presented in a Tooltip.
Internal Logic
Tabbed Widget. Different content types can be gathered under a single widget, using Tabs.
The tabs replace the widget header and the additional information.
The action buttons refer to the widget as a whole (all tabs together).
Configuration. Widget configurations, such as resizing or moving location, should be saved per user for future sessions.
States
State | Image |
|---|---|
Regular |  |
Hover |  |
Hover- Draggable |  A frame will be added as a visual indication for draggability |
Active (relevant for draggable widgets only, while being dragged) |  |
Disabled | TBD - graphic design |
Error | - |
Focused | - |
Focused, Hover | - |
Focused, Active | - |
Focused, Disabled | - |
Interaction
(optional) Expand or collapse of a widget can be done by clicking a button in the action buttons area.
The widget will be collapsed and expanded using an animation.
(optional) Drag:
Hovering over the widget will change the widget to the hover-draggable state.
Hovering over the header area will change the mouse cursor to a dragging state.
The user can click-and-hold to drag the widget to a new location. (See Drag and Drop for more information).
A drag handle may also be presented on hover:
(optional) Resize. Hovering over the boundaries of the widget can allow the user to resize it horizontally, vertically, or diagonally.
On hover:
The mouse cursor will change to drag horizontally, vertically, or diagonally.
The boundary line will be visually presented as resizable.
The hover and resize area should be at list 6 pixels wide.
Click-and-hold while changing the mouse location will resize the widget.
Validations and errors
The content of the widget may have an empty state and a loading state.
See relevant pages for more info.
Transitions
Expand and collapse will be animated.
Best practices
Use:
In dashboards.
When the entity should be configurable in size and location.
Don’t use:
When the entity is not self-contained, and doesn’t stand on its own.
As a single widget in a page.
General
Widget title should be short and informative. Avoid presenting a long description that will not be fully presented in various responsive states.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
On dashboards, widgets will be placed on a grey background:
