Pill Component - Replay UI

One

Two

Three

Component Details

Pills are small, rounded UI element used for displaying and selecting categories, tags, or filters.


        <div class="c-pill__group">
          <div class="c-pill">One</div>
          <div class="c-pill">Two</div>
          <div class="c-pill">Three</div>
        </div>


        .c-pill {
          padding: 5px 15px;
          border-radius: 20px;
          background-color: transparent;
          border: 1px solid #33aef7;
          color: #ffffff;
          font-size: 16px;
          transition: all 0.2s ease;
          cursor: pointer;
        }
        
        .c-pill:hover {
          background-color: #33aef7;
        }
        
        .c-pill__group {
          display: flex;
          column-gap: 5px;
        }


        .c-pill {
          padding: 5px 15px;
          border-radius: 20px;
          background-color: transparent;
          border: 1px solid #33aef7;
          color: #ffffff;
          font-size: 16px;
          transition: all 0.2s ease;
          cursor: pointer;
          
          &:hover {
            background-color: #33aef7;
          }
          
          &__group {
            display: flex;
            column-gap: 5px;
          }
        }