Custom Button Components

List Group

<ul class="list-group"> <li class="list-group-item"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked=""> <span class="checkbox-custom"></span> <span class="label-text">Option 1</span> </label> </li> <li class="list-group-item"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked=""> <span class="checkbox-custom"></span> <span class="label-text">Option 2</span> </label> </li> <li class="list-group-item"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked=""> <span class="checkbox-custom"></span> <span class="label-text">Option 3</span> </label> </li> <li class="list-group-item"> <label class="checkbox-label"> <input type="checkbox" class="checkbox-input" checked=""> <span class="checkbox-custom"></span> <span class="label-text">Option 4</span> </label> </li> </ul>

List Group

  • A simple default list group item
  • A simple default list group item
  • A simple default list group item
  • A simple default list group item
  • A simple default list group item
  • A simple default list group item
<ul class="list-group"> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item">A simple default list group item</li> <li class="list-group-item">A simple default list group item</li> </ul>

List Group

  • A simple default list group item with buttons
  • A simple default list group item with buttons
  • A simple default list group item with buttons
  • A simple default list group item with buttons
  • A simple default list group item with buttons
<ul class="list-group"> <li class="list-group-item"> <span> <button class="btn btn-icon btn--ghost"> <i data-lucide="ellipsis-vertical"></i> </button> A simple default list group item with buttons </span> <span> <button class="btn btn-icon"> <i data-lucide="user"></i> </button> <button class="btn btn-icon"> <i data-lucide="star"></i> </button> <button class="btn btn-icon"> <i data-lucide="ellipsis-vertical"></i> </button> </span> </li> <li class="list-group-item"> <span> <button class="btn btn-icon btn--ghost"> <i data-lucide="ellipsis-vertical"></i> </button> A simple default list group item with buttons </span> <span> <button class="btn btn-icon"> <i data-lucide="user"></i> </button> <button class="btn btn-icon"> <i data-lucide="star"></i> </button> <button class="btn btn-icon"> <i data-lucide="ellipsis-vertical"></i> </button> </span> </li> <li class="list-group-item"> <span> <button class="btn btn-icon btn--ghost"> <i data-lucide="ellipsis-vertical"></i> </button> A simple default list group item with buttons </span> <span> <button class="btn btn-icon"> <i data-lucide="user"></i> </button> <button class="btn btn-icon"> <i data-lucide="star"></i> </button> <button class="btn btn-icon"> <i data-lucide="ellipsis-vertical"></i> </button> </span> </li> <li class="list-group-item"> <span> <button class="btn btn-icon btn--ghost"> <i data-lucide="ellipsis-vertical"></i> </button> A simple default list group item with buttons </span> <span> <button class="btn btn-icon"> <i data-lucide="user"></i> </button> <button class="btn btn-icon"> <i data-lucide="star"></i> </button> <button class="btn btn-icon"> <i data-lucide="ellipsis-vertical"></i> </button> </span> </li> <li class="list-group-item"> <span> <button class="btn btn-icon btn--ghost"> <i data-lucide="ellipsis-vertical"></i> </button> A simple default list group item with buttons </span> <span> <button class="btn btn-icon"> <i data-lucide="user"></i> </button> <button class="btn btn-icon"> <i data-lucide="star"></i> </button> <button class="btn btn-icon"> <i data-lucide="ellipsis-vertical"></i> </button> </span> </li> </ul>

List Group

  • #DF34G34
    15/09/2025     On Delivery
  • #DF34G34
    15/09/2025     Delivered
  • #DF34G34
    15/09/2025     Returned
  • #DF34G34
    15/09/2025     Shipping
<ul class="list-group"> <li class="list-group-item"> <span> <h5 class="m-0">#DF34G34</h5> <small>15/09/2025</small> </span> <span> <span class="badge badge-apricot--outline">On Delivery</span> </span> </li> <li class="list-group-item"> <span> <h5 class="m-0">#DF34G34</h5> <small>15/09/2025</small> </span> <span> <span class="badge badge-aquamarine--outline">Delivered</span> </span> </li> <li class="list-group-item"> <span> <h5 class="m-0">#DF34G34</h5> <small>15/09/2025</small> </span> <span> <span class="badge badge-lightblue--outline">Returned</span> </span> </li> <li class="list-group-item"> <span> <h5 class="m-0">#DF34G34</h5> <small>15/09/2025</small> </span> <span> <span class="badge badge-orange--outline">Shipping</span> </span> </li> </ul>