Hesoyam

Pagination

Previous and next links for a linear docs or settings sequence. Not a numbered page list.

Default

Pass previous and next as { title, href }. Either side may be omitted.


        

          1
          
          <Pagination
        

          2
          
            :previous="{ title: 'Modal', href: '/modal' }"
        

          3
          
            :next="{ title: 'Progress', href: '/progress' }"
        

          4
          
          />

Previous


        

          1
          
          <Pagination :previous="{ title: 'Menu', href: '/menu' }" />

Next


        

          1
          
          <Pagination :next="{ title: 'Note', href: '/note' }" />

Best practices

  • This control is for a path the user walks in order — docs, onboarding, a wizard. A table with many pages needs a different pattern.
  • title is the destination page name, Title Case, not “Previous page”. The word Previous / Next is already in the chrome.
  • Omit the side that does not exist. Do not invent a disabled link back to the same URL.
  • Keep titles short enough to truncate cleanly. The row caps each side at half the width.
  • href should be a real route. This component renders anchors, not buttons, so it is for navigation only.