Heartwood

Action List 

<!-- Default -->
<ul class="button-group">
    <li class="button-group__item">
        <button class="btn btn-primary " type="button">
					<span class="btn__inner">
							<span class="btn__text">Confirm Changes</span>
						
					</span>	
			</button>
    </li>
    <li class="button-group__item">
        <button class="btn btn-secondary " type="button">
					<span class="btn__inner">
							<span class="btn__text">Cancel</span>
						
					</span>	
			</button>
    </li>
</ul>


<!-- Segmented -->
<ul class="button-group button-group-segmented">
    <li class="button-group__item">
        <button class="btn btn-secondary " type="button">
					<span class="btn__inner">
							<span class="btn__text">Option One</span>
						
					</span>	
			</button>
    </li>
    <li class="button-group__item">
        <button class="btn btn-secondary " type="button">
					<span class="btn__inner">
							<span class="btn__text">Option Two</span>
						
					</span>	
			</button>
    </li>
    <li class="button-group__item">
        <button class="btn btn-secondary " type="button">
					<span class="btn__inner">
							<span class="btn__text">Option Three</span>
						
					</span>	
			</button>
    </li>
</ul>


<!-- 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>
 
/* Default */
{
  "actions": [
    {
      "text": "Confirm Changes",
      "className": "btn-primary"
    },
    {
      "text": "Cancel",
      "className": "btn-secondary"
    }
  ]
}


/* Segmented */
{
  "actions": [
    {
      "text": "Option One",
      "className": "btn-secondary"
    },
    {
      "text": "Option Two",
      "className": "btn-secondary"
    },
    {
      "text": "Option Three",
      "className": "btn-secondary"
    }
  ],
  "isSegmented": true
}


/* Floating */
{
  "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.