Nav open / close arrow

Styles

Using this Component

UIToggleDisplay serves as a way to alternate between two opposing states (typically active/non-active or on/off).

Usage

Use UIToggleDisplay when you have two mutually exclusive oposing states (active/non-active or on/off) and imagery or a word can convey the meaning.

UISwitch can be used in forms, but UIToggleDisplay should not.

UIToggleDisplay can also be grouped together with other like toggles in a smaller space.

UIToggleDisplay does not impose a state on the page, but affects what is displayed on the page (e.g. filtering).

Structure

The tooltip on hover conveys the meaning of the icon or text. The tooltip does not change depending on the selected vs. unselected state.


Behavior

The states are mutually exclusive and there is a default option (usually inactive or off). The selection should take immediate effect and should not require the user to click Save or Submit to apply the new state. This action affects the display of what is shown.

Related Components

Last Updated

January 31, 2020

Coming soon...

Component code details are not currently available on this site, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.