Adobe Commerce 2.3 reached end of support in September 2022.

View Controller

Within the Magento application, user may need to view a set of data in more than one way. The view controller is used to switch between the views of data set.

For solutions not described in this article, please refer to other related patterns or contact the Magento UX Design Team.

When to Use/When Not to Use

Only use for switching between views of data set.


Follow are variations of icons to use for their corresponding data set views:


User switches between the views using the view controller. User can click on the view, that is corresponding to the view they want to see.

In this case, user select data table view control, the data table view is shown.

Then, the user can also switch back to tile view in this example.


The view control should always be placed as the most right item on the same row as filter options.



The controller should be accessible by keyboard and have a voice over for screen readers. Accessibility guideline follow buttons’ guideline.

(Keyboard shortcut same as checkbox)


Download View Controller PSD source

Please reach out to the Magento UX Design team if you need anything else.