4.11 #Button.dropdown-color-picker Dropdown as color picker

Toggle example guides Toggle HTML markup

Html
<a class="sf-button -large -left -angled -sf-pr-5xs -no-hover -icon -dropdown -dropped" aria-expanded="true" aria-haspopup="true" role="listbox" tabindex="0" >
   <span class="sf-button__content">
       <i class="sf-badge -sf-m-4xs -size-l -square" style="background-color: rgb(220, 236, 245);"></i>
   </span>
   <i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-m"></i>
   <div class="sf-button__dropdown">
       <div class="sf-dropdown -narrow" >
           <div class="sf-color-palette" style="grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
               <div class="sf-color-palette__item" style="background-color: rgb(255, 173, 173);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 164, 225);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(245, 154, 255);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(139, 244, 255);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(146, 255, 251);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(158, 255, 201);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 255, 174);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 235, 141);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(228, 207, 197);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(220, 236, 245);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 122, 123);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 113, 173);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(194, 103, 220);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(87, 193, 255);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(95, 208, 200);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(107, 222, 150);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 255, 123);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 184, 90);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(177, 157, 146);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(169, 185, 194);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 72, 72);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(220, 62, 123);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(143, 52, 169);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(35, 142, 252);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(44, 157, 149);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(56, 171, 99);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(255, 224, 72);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(237, 133, 39);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(126, 106, 95);"></div>
               <div class="sf-color-palette__item" style="background-color: rgb(118, 134, 143);"></div>
           </div>
       </div>
   </div>
</a>