<!-- 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\"/>"
}
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: