<!-- Default -->
<button class="btn btn-simple " type="button">
		<span class="btn__inner">
				<span class="btn__text">Sign Up</span>
			
		</span>	
</button>

<!-- Disabled -->
<button class="btn btn-simple " type="button" disabled>
		<span class="btn__inner">
				<span class="btn__text">Sign Up</span>
			
		</span>	
</button>

<!-- Loading -->
<button class="btn btn-simple btn--loading " type="button" disabled>
		<span class="btn__inner">
				<span class="btn__text">Sign Up</span>
			<span class="loader">
		<span class="loader__dot"></span>
		<span class="loader__dot"></span>
		<span class="loader__dot"></span>
	</span>
		</span>	
</button>

<!-- Icon -->
<button class="btn btn-simple " type="button">
		<span class="btn__inner">
			<span class="btn__icon-wrapper">
				<?xml version="1.0" encoding="utf-8"?>
				<svg
					class='btn__icon '
					version="1.1"
					id="Layer_1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
					x="0px"
					y="0px"
					width="24px"
					height="24px"
					viewBox="0 0 24 24"
					enable-background="new 0 0 24 24"
					xml:space="preserve">
				<path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
				</svg>
			</span>
				<span class="btn__text">Add a Location</span>
			
		</span>	
</button>

<!-- Icon Only -->
<button class="btn btn-simple  btn-icon-only " type="button">
		<span class="btn__inner">
			<span class="btn__icon-wrapper">
				<?xml version="1.0" encoding="utf-8"?>
				<svg
					class='btn__icon '
					version="1.1"
					id="Layer_1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
					x="0px"
					y="0px"
					width="24px"
					height="24px"
					viewBox="0 0 24 24"
					enable-background="new 0 0 24 24"
					xml:space="preserve">
				<path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
				</svg>
			</span>
			
		</span>	
</button>

{{> @button}}
/* Default */
{
  "text": "Sign Up",
  "className": "btn-simple",
  "type": "button"
}

/* Disabled */
{
  "text": "Sign Up",
  "className": "btn-simple",
  "type": "button",
  "disabled": true
}

/* Loading */
{
  "text": "Sign Up",
  "className": "btn-simple btn--loading",
  "type": "button",
  "disabled": true,
  "loading": true
}

/* Icon */
{
  "text": "Add a Location",
  "className": "btn-simple",
  "type": "button",
  "icon": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/>"
}

/* Icon Only */
{
  "text": null,
  "className": "btn-simple",
  "type": "button",
  "icon": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"/>"
}

Simple Button

When to use: Simple buttons can be used in any context where an action may be triggered that is neither primary nor secondary. For example, a simple button with an ‘X’ icon can be used to close a modal.

When not to use:

Uses these components