Heartwood

Action List: Floating 

<ul class="button-group button-group-floating">
    <li class="button-group__item">
        <button class="btn btn-simple btn-full-width " type="button">
					<span class="btn__inner">
							<span class="btn__text">Edit Service</span>
						
					</span>	
			</button>
    </li>
    <li class="button-group__item">
        <button class="btn btn-simple btn-full-width " type="button">
					<span class="btn__inner">
							<span class="btn__text">Hide Service</span>
						
					</span>	
			</button>
    </li>
    <li class="button-group__item">
        <button class="btn btn-simple btn-full-width " type="button">
					<span class="btn__inner">
							<span class="btn__text">Move to Category</span>
						
					</span>	
			</button>
    </li>
</ul>
 
<ul class="button-group{{#if isSegmented}} button-group-segmented{{/if}}{{#if isFloating}} button-group-floating{{/if}}">
	{{#each actions}}
		<li class="button-group__item">
			{{> @button }}
		</li>
	{{/each}}
</ul>
 
{
  "actions": [
    {
      "text": "Edit Service",
      "className": "btn-simple btn-full-width"
    },
    {
      "text": "Hide Service",
      "className": "btn-simple btn-full-width"
    },
    {
      "text": "Move to Category",
      "className": "btn-simple btn-full-width"
    }
  ],
  "isFloating": true
}

Button Group

Button groups arrange related actions in close proximity. For example, a primary and secondary action.

Segmented

A segmented Button Group may be used when several actions are closely related and there is no clear hierarchy among them.

Floating

A floating Button Group may be used for a Context Menu of related actions.