4 #Button Button

    <button class="sf-button -action">action Default Button</button>
    <button class="sf-button -action" disabled>Disabled action Default Button</button>

    <button class="sf-button -action -large">action large Default Button</button>
    <button class="sf-button -action -large" disabled>Disabled action large Default Button</button>

    <button class="sf-button -action -small">action small Default Button</button>
    <button class="sf-button -action -small" disabled>Disabled action small Default Button</button>

    <div class="sf-button-group">
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
    <button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
    </div>

<button class="sf-button -txt-small -small -circle">+4</button>
<br>
<a class="sf-button -txt-small -small -circle">+4</a>

    <button class="sf-button">Default Button</button>
    <button class="sf-button" disabled>Disabled Default Button</button>
    <a class="sf-button">Default Button</a>
    <a class="sf-button -disabled">Disabled Default Button</a>

    <button class="sf-button -delete">delete Default Button</button>
    <button class="sf-button -delete" disabled>Disabled delete Default Button</button>

    <button class="sf-button -delete -large">delete large Default Button</button>
    <button class="sf-button -delete -large" disabled>Disabled delete large Default Button</button>

    <button class="sf-button -delete -small">delete small Default Button</button>
    <button class="sf-button -delete -small" disabled>Disabled delete small Default Button</button>

    <div style="height: 150px; padding-left: 160px;">
        <button type="button" class="sf-button -no-border -icon -dropdown -dropped">
            <i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
            <div class="sf-button__dropdown">
                <div class="sf-dropdown">
                     <div class="sf-dropdown__heading">
                        Edit
                     </div>
                     <div class="sf-dropdown__item -active">
                        Default News
                     </div>
                     <div class="sf-dropdown__item">
                        test News
                     </div>
                     <div class="sf-dropdown__separator">
                     </div>
                     <div class="sf-dropdown__item -sf-txt-failure">
                         Delete
                     </div>
                </div>
           </div>
        </button>
    </div>

<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>

    <div style="height: 120px;">
        <a class="sf-button -no-border -left -icon -dropdown -dropped">
            <span>Default News</span>
            <i class="sf-button__icon sf-icon sf-fa sf-fa-caret-down -size-xs"></i>
            <div class="sf-button__dropdown">
                <div class="sf-dropdown">
                     <div class="sf-dropdown__item -active">
                        Default News
                     </div>
                     <div class="sf-dropdown__item">
                        test News
                     </div>
                </div>
           </div>
        </a>
    </div>

    <button class="sf-button -feedback"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>
    <button class="sf-button -feedback -done"><div class="sf-button__content">Feedback Button</div><i class="sf-button__icon sf-fa sf-fa-check sf-icon"></i></button>

   <div class="sf-button-group -search">
    <i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
    <div class="sf-input -clearable">
       <input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
        <span class="sf-input__clear-button">
            <i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
        </span>
     </div>
  </div>
   <div class="sf-button-group -search">
    <i class="sf-fa sf-fa-search sf-icon -size-s -light"></i>
    <div class="sf-input -clearable">
       <input type="text" class="sf-input__field" placeholder="Narrow by typing..." />
        <span class="sf-input__clear-button -show">
            <i class="sf-icon sf-fa sf-fa-times -size-3xs"></i>
        </span>
     </div>
  </div>

    <button class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
    <button class="sf-button -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
    <button class="sf-button -action -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
    <button class="sf-button -action -icon" disabled><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></button>
    <br>
    <a class="sf-button -icon"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>
    <a class="sf-button -icon -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-sliders sf-button__icon"></i></a>

    <button class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></button>
    <button class="sf-button -icon -circle" disabled><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
    <button class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></button>
    <br>
    <a class="sf-button -icon -circle"><i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i></a>
    <a class="sf-button -icon -circle -disabled"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>
    <a class="sf-button -icon -circle -small"><i class="sf-icon -size-xs sf-fa sf-fa-times sf-button__icon"></i></a>

    <button class="sf-button -invert">invert Default Button</button>
    <button class="sf-button -invert" disabled>Disabled invert Default Button</button>

    <button class="sf-button -invert -large">invert large Default Button</button>
    <button class="sf-button -invert -large" disabled>Disabled invert large Default Button</button>

    <button class="sf-button -invert -small">invert small Default Button</button>
    <button class="sf-button -invert -small" disabled>Disabled invert small Default Button</button>

    <button class="sf-button -large">large Default Button</button>
    <button class="sf-button -large" disabled>Disabled large Default Button</button>

    <button class="sf-button -link">link Default Button</button>
    <button class="sf-button -link" disabled>Disabled link Default Button</button>

    <button class="sf-button -link -large">link large Default Button</button>
    <button class="sf-button -link -large" disabled>Disabled link large Default Button</button>

    <button class="sf-button -link -small">link small Default Button</button>
    <button class="sf-button -link -small" disabled>Disabled link small Default Button</button>

    <div style="height: 150px; padding-left: 160px;">
        <button type="button" class="sf-button -icon -dropdown -dropped">
            <i class="sf-button__icon sf-icon sf-fa sf-fa-ellipsis-h -size-m" title="Actions"></i>
            <div class="sf-button__dropdown">
                <div class="sf-dropdown">
                     <div class="sf-dropdown__heading">
                        Edit
                     </div>
                     <div class="sf-dropdown__item -active">
                        Default News
                     </div>
                     <div class="sf-dropdown__item">
                         News items<span class="sf-dropdown__counter -positive">14</span>
                     </div>
                     <div class="sf-dropdown__separator">
                     </div>
                     <div class="sf-dropdown__item -sf-txt-failure">
                         Delete
                     </div>
                </div>
           </div>
        </button>
    </div>

    <div class="sf-button-group -search">
     <div class="sf-input">
          <input type="text" class="sf-input__field" placeholder="Search..." />
    </div>
     <button class="sf-button -icon">
         <i class="sf-fa sf-fa-search sf-icon -size-s sf-button__icon"></i>
     </button>
   </div>

    <button class="sf-button -sidebar-tree">sidebar-tree Default Button</button>
    <button class="sf-button -sidebar-tree" disabled>Disabled sidebar-tree Default Button</button>

    <button class="sf-button -sidebar-tree-invert">sidebar-tree-invert Default Button</button>
    <button class="sf-button -sidebar-tree-invert" disabled>Disabled sidebar-tree-invert Default Button</button>

    <button class="sf-button -sidebar-tree-invert -large">sidebar-tree-invert large Default Button</button>
    <button class="sf-button -sidebar-tree-invert -large" disabled>Disabled sidebar-tree-invert large Default Button</button>

    <button class="sf-button -sidebar-tree-invert -small">sidebar-tree-invert small Default Button</button>
    <button class="sf-button -sidebar-tree-invert -small" disabled>Disabled sidebar-tree-invert small Default Button</button>

    <button class="sf-button -sidebar-tree -large">sidebar-tree large Default Button</button>
    <button class="sf-button -sidebar-tree -large" disabled>Disabled sidebar-tree large Default Button</button>

    <button class="sf-button -sidebar-tree -small">sidebar-tree small Default Button</button>
    <button class="sf-button -sidebar-tree -small" disabled>Disabled sidebar-tree small Default Button</button>

    <button class="sf-button -small">small Default Button</button>
    <button class="sf-button -small" disabled>Disabled small Default Button</button>

    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></button>
    <button class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></button>
    <button class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></button>
    <button class="sf-button -toggle"><span class="sf-button__content"><i class="sf-badge -size-xl-fixed -add-variation -sf-txt-small">EN</i></span></button>
    <br>
    <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-sitemap sf-button__icon"></i></a>
    <a class="sf-button -active -icon -toggle"><i class="sf-icon sf-fa sf-fa-filter sf-button__icon"></i></a>
    <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-cog sf-button__icon"></i></a>
    <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-lightbulb-o sf-button__icon"></i></a>
    <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-th-list sf-button__icon"></i></a>
    <a class="sf-button -icon -toggle"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>
    <a class="sf-button -icon -toggle -disabled"><i class="sf-icon sf-fa sf-fa-angle-left -size-2xl sf-button__icon"></i></a>