Description
A widget is a container element designed to work within a workspace.
 |  |
 |  |
Usage & Behavior
General guidelines
Structure
A widget consists of:
Header, which includes:
Widget title, with or without additional information. In some cases, this may be replaced by Tabs (see below).
Widget controls (optional), including Icon Buttons and/or an Action Menu (see below).
A collapse/expand icon to the left of the title (optional).
Content area.
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.
 |
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).
Tabbed Widgets
Different content types can be gathered under a single widget, using Tabs. In this case:
The tabs replaces the widget title (and the additional information, if exists).
The action buttons refer to the widget as a whole (and not to each tab individually).
|  |
Placement and Positioning
A widget can be placed anywhere on a page.
Internal Logic
Widget layout configurations, such as size and location, will persist per user on future sessions.
States
State | Image |
|---|---|
Regular |  |
Hover (only when draggable) |  |
Active (only when draggable) |  |
Focused |  |
Edge Cases
State | Image |
|---|---|
Empty state |  |
Loading… |  |
Loading error |  |
Interaction
Clicking the collapse/expand icon, will collapse / expand the widget using an animation. In this case the workspace layout may be changed.
|  |
Drag and drop (optional):
Hovering over the widget will switch the widget to the hover state.
Hovering over the header area (including the handle) will change the mouse cursor to a dragging state.
The user can drag the widget to a new location (See Drag and Drop for more information).
|
Validations and errors
Widgets has no special validations.
In case there are errors in the content area and the widget is collapsed an indicator will appear next to the widget title:
 |
Transitions
Expand and collapse will be animated.
Best practices
Use:
As a container within a workspace.
In dashboards.
General
Widget title and additional information should be short and informative. Avoid presenting long text that will not be fully presented in various responsive states.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
On dashboards, widgets will be placed on a grey background:
 |
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
