Pagination Component

Component Details

Pagination allows users to navigate through large sets of data by dividing content into separate pages with navigation controls.


        <div class="c-pagination">
          <button class="c-pagination__button">Previous</button>
          <button class="c-pagination__button is-active">1</button>
          <button class="c-pagination__button">2</button>
          <button class="c-pagination__button">3</button>
          <button class="c-pagination__button">Next</button>
        </div>


        .c-pagination {
          display: flex;
          column-gap: 10px;
          align-items: center;
        }
        
        .c-pagination__button {
          padding: 10px 15px;
          border-radius: 5px;
          border: 1px solid #33aef7;
          background-color: transparent;
          color: #ffffff;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .c-pagination__button:hover {
          background-color: #33aef7;
          color: #12161e;
        }
        
        .c-pagination__button.is-active {
          background-color: #33aef7;
          color: #12161e;
        }


        .c-pagination {
          display: flex;
          column-gap: 10px;
          align-items: center;
          
          &__button {
            padding: 10px 15px;
            border-radius: 5px;
            border: 1px solid #33aef7;
            background-color: transparent;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:hover {
              background-color: #33aef7;
              color: #12161e;
            }
            
            &.is-active {
              background-color: #33aef7;
              color: #12161e;
            }
          }
        }


        const paginatedButtons = document.querySelectorAll('.c-pagination__button');
        const removeActiveButton = () => {
          paginatedButtons.forEach((button) => {
           button.classList.remove('is-active');
          }); 
        }
        
        paginatedButtons.forEach((button) => {
          button.addEventListener('click', () => {
            removeActiveButton();
            button.classList.add('is-active');
          });
        });