A hover state communicates when the cursor is paused over an interactive element.

1. Example variable --unity-colors-toolbar_button-text-hover
   
2. Hover states are visually indicated by lighter fill colors in action controls, and lighter border colors in input controls
3. Hover states can be combined with focus, checked, pressed, or selected states
4. Visual elements can display a tooltip on hover state by using the .tooltip property

A focus state communicates when an interactive element is highlighted via a mouse click or keyboard.

1. Example variable --unity-colors-button-background-focus
   
2. In most cases, focused elements are highlighted in blue; the use of blue in the Editor is reserved for controls that can be focused, pressed, or selected
3. Focus states can be hovered
4. Focused controls can receive keyboard inputs

A disabled state communicates an element is not interactive and not accepting user input.

1. Example variable --unity-colors-slider_groove-background-disabled
   
2. In most cases, disabled elements have a 40% alpha value, including their contents such as labels and icons
3. Disabled states do not accept user input
4. Provide help boxes to give more context about why a controls is disabled; see help boxes  and errors & messaging for more information

Binary controls like toggles, and passive input controls can be checked to communicate their on / off status.

1. Example variable --unity-colors-toolbar_button-background-checked
   
2. Checked states are used to communicate the active option from a binary set
   
3. Checked states are reserved to be used for on / off inputs; use pressed state to communicate when a control is active
   
4. Input controls can represent checked state with icon change (toggles)
   

A pressed state communicates when a control is pressed and active (eg. buttons, toggle buttons)

1. Example variable --unity-colors-button-background-pressed
   
2. Pressed states are visually indicated by blue highlight fill colors and can be emphasized by border colors
   

Highlighted parts of the UI, such as text selections or selected items in list views or tree views.

1. More than one highlighted state can be present at a time
   
2. Highlighted states can often be dragged
   
3. Example variable --unity-colors-highlight-background
   

Most Editor windows support right-click actions.

Throughout the Editor, right-click is reserved for opening context menus. Context menus are dependent on the clicked element and can show various options based on the workflow.

Right click on runtime windows

Note that runtime applications such as Scene and Game views do not support right click actions.

Context menus

For more information on context "right-click" menus go to Patterns > Menus ->

Adding

Users can add assets and controls to panels or canvases, by dragging them from the source and dropping in the target.

Note that the mouse cursor changes to “Copy cursor" while adding an item.

For example, Project window allows users to add an asset by dragging and dropping it into the target folder.

Adding a folder to the project window by dragging

UI Builder also allows dragging a control from the UI Builder library into the viewport or the hierarchy windows.

Adding a radio button to the ui builder canvas (viewport) by dragging

Duplicating

Similar to adding, users can duplicate (copy) assets by holding ALT and dragging the asset from the source and dropping in the target. Both dragged item and the target are highlighted while dragging.

Note that the mouse cursor changes to “copy cursor" while adding an item.

Moving tree view items

Tree view allows users to:

1. Reorder an item in its own hierarchy by dragging vertically
   
2. Move an item in or out of a parent item or folder by dragging horizontally towards nesting target
   
3. View the target hierarchy with a blue circle at the beginning of the drop line
   

Setting up tree view drag and drop behaviors in IMGUI

For information on setting up drag and drop behaviors go to Unity Documentation / CanStartDrag function ->

1. Target dropzone, showing where the container can be docked  2. Ghost dropzone, showing where the container currently is

1. Target drop zone: While dragging a container, the target drop zone shows where the container can be docked by highlighting the target area
2. Ghost drop zone: While dragging a docked container, the ghost drop zone shows where the container currently is by highlighting the shape of the container in its current location

Drop zone locations: 1. corner 2. edge 3. toolbar docking

The shapes of target and ghost drop zones are displayed differently depending on the location of the overlay container / target.

1. Corner drop zone: Corner drop zones are used to highlight corners of the window where a container can be docked; they appear as a square blue layer in the corner of the container the overlay is being dragged into
2. Edge drop zone: Edge drop zones are used to highlight edges of the window where a container can be docked; they appear as a thin blue layer along the edge of the container the overlay is being dragged into
3. Toolbar drop zone: When a container is being dragged into a toolbar, the position of the target is highlighted within it

When building your feature, design your layout to adapt to various sizes.

Note that the mouse cursor changes to “resize cursor" while dragging the edges of the panel.