Page Control

Design the page control for a document or image viewer. This is the strip that lets someone move through pages, jump to a specific page, and adjust the view without leaving the content area.

Include the core controls: previous/next buttons, current page indicator, total pages, direct page entry, and zoom controls. If the layout needs it, add fit-to-page or fit-to-width as a secondary action. Keep the control compact and readable at desktop sizes.

Design the key states: default, hover, disabled, focused, active, and error for invalid page input. Show what happens when the user is at the first page, last page, or enters a page number outside the valid range. Any feedback should appear inline and preserve the entered value.

Place the control in context so the spacing, hierarchy, and hit targets make sense with real content above or beside it. The page control should feel like part of the viewer, not a floating widget.

Inject personality into your page controls with unique icons and animated transitions to delight users while they interact.