Heartwood

Caution Button: Loading 

<button class="btn btn-caution btn--loading " type="button" disabled>
		<span class="btn__inner">
				<span class="btn__text">Delete Team</span>
			<span class="loader">
		<span class="loader__dot"></span>
		<span class="loader__dot"></span>
		<span class="loader__dot"></span>
	</span>
		</span>	
</button>
 
{{> @button}}
 
{
  "text": "Delete Team",
  "className": "btn-caution btn--loading",
  "type": "button",
  "disabled": true,
  "loading": true
}

Caution Button

When to use:

If an action is destructive, use the Caution Button. For example, removing a teammate or deactivating an account.

When not to use:

  • Non-destructive actions; instead use another type of button.

Uses these components