Nav open / close arrow


Using this Component

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


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).


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


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

August 6, 2020

Coming soon...

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

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

Eng Description


Code Path & Props

Up to date props can be found at the codepath above.

Example Code