Toggle Component

A toggle is used to instantly switch between two possible options. Usually to switch on/off or enable/disable conditions.


Toggle States

Information only
Displays only the contextual information related to the referred item.
Information only
Displays only the contextual information related to the referred item.
Information only
Displays only the contextual information related to the referred item.

Guideline

• On default, tooltips are placed on top of the selected item. But when there isn’t enough space in the viewport, it should be placed to the side or below as needed.
• For popovers triggered by hover, the popover will stay displaying when the cursor is hovering on the popover itself. It disappears when the cursor moves somewhere elsewhere the referred item or the popover.

When to Use

• To give more contextual information or action about a selected item.
• The information shown can be a form of long sentence or list (ordered/unordered)
• Provide actionable buttons but not critical to act upon it.

When not to Use

• Displaying actionable items which is crucial for the main use flow. For example, displaying a form to input username or password to log in.

Code