No notes defined.
<!-- Default -->
<button class="button"><span class="button-label">Button</span></button>
<!-- Disabled -->
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
<!-- Icon Left -->
<button class="button"><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<!-- Icon Right -->
<button class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<!-- Icon only -->
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<!-- Link -->
<a href="#" class="button"><span class="button-label">Link styled as Button</span></a>
<!-- Documentation only -->
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Large</h2>
<div class="doc-header-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large "><span class="button-label">Button</span></button>
<button class="button is-large " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-secondary "><span class="button-label">Button</span></button>
<button class="button is-large is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-large is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-alt</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-alt "><span class="button-label">Button</span></button>
<button class="button is-large is-alt " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-alt "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-alt " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-alt is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-alt "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-alt</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-alt is-secondary "><span class="button-label">Button</span></button>
<button class="button is-large is-alt is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-alt is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-alt is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-alt is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-alt is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-alt</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-alt is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-large is-alt is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-alt is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-alt is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-alt is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-alt is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Danger</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
<li>is-danger</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-large is-danger "><span class="button-label">Button</span></button>
<button class="button is-large is-danger " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-large is-danger "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-large is-danger " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-large is-danger is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-large is-danger "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Medium (Default)</h2>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary</h3>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button "><span class="button-label">Button</span></button>
<button class="button " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-secondary "><span class="button-label">Button</span></button>
<button class="button is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-alt</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-alt "><span class="button-label">Button</span></button>
<button class="button is-alt " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-alt "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-alt " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-alt is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-alt "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-alt</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-alt is-secondary "><span class="button-label">Button</span></button>
<button class="button is-alt is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-alt is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-alt is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-alt is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-alt is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-alt</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-alt is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-alt is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-alt is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-alt is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-alt is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-alt is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Danger</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-danger</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-danger "><span class="button-label">Button</span></button>
<button class="button is-danger " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-danger "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-danger " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-danger is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-danger "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Small</h2>
<div class="doc-header-configuration">
<ul data-label="Modifier">
<li>is-small</li>
</ul>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small "><span class="button-label">Button</span></button>
<button class="button is-small " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-secondary "><span class="button-label">Button</span></button>
<button class="button is-small is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-small is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-alt</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-alt "><span class="button-label">Button</span></button>
<button class="button is-small is-alt " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-alt "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-alt " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-alt is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-alt "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-alt</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-alt is-secondary "><span class="button-label">Button</span></button>
<button class="button is-small is-alt is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-alt is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-alt is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-alt is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-alt is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-alt</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-alt is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-small is-alt is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-alt is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-alt is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-alt is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-alt is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Danger</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
<li>is-danger</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-small is-danger "><span class="button-label">Button</span></button>
<button class="button is-small is-danger " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-small is-danger "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-small is-danger " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-small is-danger is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-small is-danger "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<div class="doc-section">
<div class="doc-header">
<h2 class="doc-header-title">Extra Small</h2>
<div class="doc-header-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
</ul>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small "><span class="button-label">Button</span></button>
<button class="button is-x-small " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-secondary "><span class="button-label">Button</span></button>
<button class="button is-x-small is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-x-small is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Primary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-alt</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-alt "><span class="button-label">Button</span></button>
<button class="button is-x-small is-alt " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-alt "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-alt " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-alt is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-alt "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Secondary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-alt</li>
<li>is-secondary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-alt is-secondary "><span class="button-label">Button</span></button>
<button class="button is-x-small is-alt is-secondary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-alt is-secondary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-alt is-secondary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-alt is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-alt is-secondary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Tertiary Alternative</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-alt</li>
<li>is-tertiary</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-alt is-tertiary "><span class="button-label">Button</span></button>
<button class="button is-x-small is-alt is-tertiary " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-alt is-tertiary "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-alt is-tertiary " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-alt is-tertiary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-alt is-tertiary "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Danger</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-x-small</li>
<li>is-danger</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<button class="button is-x-small is-danger "><span class="button-label">Button</span></button>
<button class="button is-x-small is-danger " disabled="disabled"><span class="button-label">Disabled</span></button>
<button class="button is-x-small is-danger "><svg class="icon is-envelope">
<use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
</svg>
<span class="button-label">Icon on Left</span></button>
<button class="button is-x-small is-danger " data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon on Right</span></button>
<button class="button is-x-small is-danger is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<a href="#" class="button is-x-small is-danger "><span class="button-label">Link styled as Button</span></a>
</div>
</div>
</div>
<!-- Default -->
<button class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#type}} type="{{.}}"{{/type}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></button>
<!-- Disabled -->
<button class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#type}} type="{{.}}"{{/type}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></button>
<!-- Icon Left -->
<button class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#type}} type="{{.}}"{{/type}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></button>
<!-- Icon Right -->
<button class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#type}} type="{{.}}"{{/type}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></button>
<!-- Icon only -->
<button class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#type}} type="{{.}}"{{/type}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></button>
<!-- Link -->
<a href="{{url}}" class="button{{#modifier}} {{{.}}}{{/modifier}}{{#if is-icon-only}} is-icon-only{{/if}}"{{#if is-download}} download{{/if}}{{#icon.position}} data-icon-position="{{.}}"{{/icon.position}}{{#if is-disabled}} disabled="disabled"{{/if}}{{#onclick}} onclick="{{.}}"{{/onclick}}>{{#icon}}{{render '@icon' (contextData '@button' this) merge=true}}{{/icon}}<span class="button-label">{{{label}}}</span></a>
<!-- Documentation only -->
{{#sections}}
<div class="doc-section">
<div class="doc-header">
{{#title}}
<h2 class="doc-header-title">{{{.}}}</h2>
{{/title}}
{{#if modifiers}}
<div class="doc-header-configuration">
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
</div>
{{/if}}
</div>
{{#variants}}
<div class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h3 class="doc-variant-title">{{{.}}}</h3>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
{{#if ../../themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
{{#../../themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/../../themes}}
</select>
</label>
{{/if}}
</div>
</header>
<div class="doc-variant-samples" data-theme="{{theme}}">
{{#samples}}
{{#if url}}
{{render '@button--link' (contextData '@button' this) merge=true}}
{{/if}}
{{#unless url}}
{{render '@button' (contextData '@button' this) merge=true}}
{{/unless}}
{{/samples}}
</div>
</div>
{{/variants}}
</div>
{{/sections}}
/* Default */
{
"label": "Button"
}
/* Disabled */
{
"label": "Disabled",
"is-disabled": true
}
/* Icon Left */
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
}
}
/* Icon Right */
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
}
}
/* Icon only */
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
/* Link */
{
"label": "Link styled as Button",
"url": "#"
}
/* Documentation only */
{
"label": "Button",
"themes": [
"default",
"dark"
],
"sections": [
{
"title": "Large",
"modifiers": "is-large",
"variants": [
{
"title": "Primary",
"modifiers": "is-large",
"samples": [
{
"label": "Button",
"modifier": "is-large "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large "
}
],
"modifier": "is-large"
},
{
"title": "Secondary",
"modifiers": [
"is-large",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-secondary "
}
],
"modifier": "is-large is-secondary"
},
{
"title": "Tertiary",
"modifiers": [
"is-large",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-tertiary "
}
],
"modifier": "is-large is-tertiary"
},
{
"title": "Primary Alternative",
"modifiers": [
"is-large",
"is-alt"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-alt "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-alt "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-alt "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-alt "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-alt "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-alt "
}
],
"modifier": "is-large is-alt"
},
{
"title": "Secondary Alternative",
"modifiers": [
"is-large",
"is-alt",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-alt is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-alt is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-alt is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-alt is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-alt is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-alt is-secondary "
}
],
"modifier": "is-large is-alt is-secondary"
},
{
"title": "Tertiary Alternative",
"modifiers": [
"is-large",
"is-alt",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-alt is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-alt is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-alt is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-alt is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-alt is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-alt is-tertiary "
}
],
"modifier": "is-large is-alt is-tertiary"
},
{
"title": "Danger",
"modifiers": [
"is-large",
"is-danger"
],
"samples": [
{
"label": "Button",
"modifier": "is-large is-danger "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large is-danger "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-large is-danger "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-large is-danger "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-large is-danger "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-large is-danger "
}
],
"modifier": "is-large is-danger"
}
]
},
{
"title": "Medium (Default)",
"variants": [
{
"title": "Primary",
"modifier": "",
"samples": [
{
"label": "Button",
"modifier": ""
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": ""
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": ""
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": ""
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": ""
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": ""
}
]
},
{
"title": "Secondary",
"modifiers": "is-secondary",
"samples": [
{
"label": "Button",
"modifier": "is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-secondary "
}
],
"modifier": "is-secondary"
},
{
"title": "Tertiary",
"modifiers": "is-tertiary",
"samples": [
{
"label": "Button",
"modifier": "is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-tertiary "
}
],
"modifier": "is-tertiary"
},
{
"title": "Primary Alternative",
"modifiers": "is-alt",
"samples": [
{
"label": "Button",
"modifier": "is-alt "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-alt "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-alt "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-alt "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-alt "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-alt "
}
],
"modifier": "is-alt"
},
{
"title": "Secondary Alternative",
"modifiers": [
"is-alt",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-alt is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-alt is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-alt is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-alt is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-alt is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-alt is-secondary "
}
],
"modifier": "is-alt is-secondary"
},
{
"title": "Tertiary Alternative",
"modifiers": [
"is-alt",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-alt is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-alt is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-alt is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-alt is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-alt is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-alt is-tertiary "
}
],
"modifier": "is-alt is-tertiary"
},
{
"title": "Danger",
"modifiers": "is-danger",
"samples": [
{
"label": "Button",
"modifier": "is-danger "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-danger "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-danger "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-danger "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-danger "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-danger "
}
],
"modifier": "is-danger"
}
]
},
{
"title": "Small",
"modifiers": "is-small",
"variants": [
{
"title": "Primary",
"modifiers": "is-small",
"samples": [
{
"label": "Button",
"modifier": "is-small "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small "
}
],
"modifier": "is-small"
},
{
"title": "Secondary",
"modifiers": [
"is-small",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-secondary "
}
],
"modifier": "is-small is-secondary"
},
{
"title": "Tertiary",
"modifiers": [
"is-small",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-tertiary "
}
],
"modifier": "is-small is-tertiary"
},
{
"title": "Primary Alternative",
"modifiers": [
"is-small",
"is-alt"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-alt "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-alt "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-alt "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-alt "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-alt "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-alt "
}
],
"modifier": "is-small is-alt"
},
{
"title": "Secondary Alternative",
"modifiers": [
"is-small",
"is-alt",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-alt is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-alt is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-alt is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-alt is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-alt is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-alt is-secondary "
}
],
"modifier": "is-small is-alt is-secondary"
},
{
"title": "Tertiary Alternative",
"modifiers": [
"is-small",
"is-alt",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-alt is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-alt is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-alt is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-alt is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-alt is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-alt is-tertiary "
}
],
"modifier": "is-small is-alt is-tertiary"
},
{
"title": "Danger",
"modifiers": [
"is-small",
"is-danger"
],
"samples": [
{
"label": "Button",
"modifier": "is-small is-danger "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small is-danger "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-small is-danger "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-small is-danger "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-small is-danger "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-small is-danger "
}
],
"modifier": "is-small is-danger"
}
]
},
{
"title": "Extra Small",
"modifiers": "is-x-small",
"variants": [
{
"title": "Primary",
"modifiers": "is-x-small",
"samples": [
{
"label": "Button",
"modifier": "is-x-small "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small "
}
],
"modifier": "is-x-small"
},
{
"title": "Secondary",
"modifiers": [
"is-x-small",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-secondary "
}
],
"modifier": "is-x-small is-secondary"
},
{
"title": "Tertiary",
"modifiers": [
"is-x-small",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-tertiary "
}
],
"modifier": "is-x-small is-tertiary"
},
{
"title": "Primary Alternative",
"modifiers": [
"is-x-small",
"is-alt"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-alt "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-alt "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-alt "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-alt "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-alt "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-alt "
}
],
"modifier": "is-x-small is-alt"
},
{
"title": "Secondary Alternative",
"modifiers": [
"is-x-small",
"is-alt",
"is-secondary"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-alt is-secondary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-alt is-secondary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-alt is-secondary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-alt is-secondary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-alt is-secondary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-alt is-secondary "
}
],
"modifier": "is-x-small is-alt is-secondary"
},
{
"title": "Tertiary Alternative",
"modifiers": [
"is-x-small",
"is-alt",
"is-tertiary"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-alt is-tertiary "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-alt is-tertiary "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-alt is-tertiary "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-alt is-tertiary "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-alt is-tertiary "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-alt is-tertiary "
}
],
"modifier": "is-x-small is-alt is-tertiary"
},
{
"title": "Danger",
"modifiers": [
"is-x-small",
"is-danger"
],
"samples": [
{
"label": "Button",
"modifier": "is-x-small is-danger "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-x-small is-danger "
},
{
"label": "Icon on Left",
"icon": {
"id": "envelope",
"weight": "bold"
},
"modifier": "is-x-small is-danger "
},
{
"label": "Icon on Right",
"icon": {
"id": "arrow-right",
"weight": "bold",
"position": "right"
},
"modifier": "is-x-small is-danger "
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-x-small is-danger "
},
{
"label": "Link styled as Button",
"url": "#",
"modifier": "is-x-small is-danger "
}
],
"modifier": "is-x-small is-danger"
}
]
}
]
}
@mixin button-states (
$states: $button-states
){
@include state-styles($states, default);
@include action-states($states);
}
$button_border-width: 3px !default;
$button_padding: .55em 1.3em !default;
$button_border-radius: 10px !default;
$button_outline-width: 4px !default;
$button-styles--large: ( // Define only properties, that differ from default variant
border-width: 4px,
border-radius: 12px,
text-size: large,
) !default;
$button-styles--small: (
border-width: 2px,
border-radius: 8px,
text-size: smallest,
) !default;
$button-styles--xsmall: (
border-width: 1px,
border-radius: 6px,
text-size: 2x-small,
) !default;
@import "_button.helpers";
@import "_button.settings";
$button-states: map.set($button-states, focus,
(
outline: transparent,
box-shadow: 0 0 0 $button_outline-width $_action-focus,
)
);
$button-states--alt: (
default: (
background-color: $_alt-action-background-color,
border-color: transparent,
color:$_alt-action-foreground-color,
box-shadow: none,
),
hover: (
background-color:$_alt-action-background-color--hover,
color:$_alt-action-foreground-color--hover,
transition-duration: $_transition-duration--in,
),
focus: (
outline: transparent,
box-shadow: 0 0 0 $button_border-width $_action-focus,
),
active: (
background-color:$_alt-action-background-color--active,
color:$_alt-action-foreground-color--active,
),
disabled: (
background-color:$_alt-action-background-color--disabled !important,
color:$_alt-action-foreground-color--disabled !important,
),
) !default;
$button-states--alt--secondary: (
default: (
background-color: transparent,
color: $_alt-action-color,
border-color: $_alt-action-border-color,
box-shadow: none,
),
hover: (
background-color:$_alt-action-background-color--hover,
color:$_alt-action-foreground-color--hover,
border-color: $_alt-action-border-color--hover,
),
active: (
background-color:$_alt-action-background-color--active,
color:$_alt-action-foreground-color--active,
border-color: $_alt-action-border-color--active,
),
disabled: (
background-color: transparent !important,
color: $_disabled-color !important,
border-color: $_alt-action-border-color--disabled !important,
),
) !default;
$button-states--alt--tertiary: (
default: (
background-color: transparent,
color: $_alt-action-color,
border-color: transparent,
box-shadow: none,
),
hover: (
background-color:$_alt-action-background-color--hover,
color:$_alt-action-foreground-color--hover,
),
active: (
background-color:$_alt-action-background-color--active,
color:$_alt-action-foreground-color--active,
),
disabled: (
background-color: transparent !important,
color: $_disabled-color !important,
),
) !default;
@import "_button.styles";
%button {
font-weight: $_font-weight__bold;
@include not-on-desktop(){
border-width: 2.5px;
}
}
%button--large {
@include not-on-desktop(){
border-width: 3px;
}
}
%button--icon-only {
border-radius: 5em !important;
}
%button--x-small {
@include styles($button-styles--xsmall);
.icon {
width: 16px;
height: 16px;
}
@if variable-exists(button_baseline-shift--xsmall) and $button_baseline-shift--xsmall != 0 {
> *:not(.icon) {
top: (-1 * $button_baseline-shift--xsmall);
}
}
}
%button--alt {
@extend %button;
@include button-states($button-states--alt);
}
%button--alt--secondary {
@include button-states($button-states--alt--secondary);
}
%button--alt--tertiary {
@include button-states($button-states--alt--tertiary);
}
.button {
@if variable-exists(button-styles--xsmall) and type-of($button-styles--xsmall) == map {
&.is-xsmall, // Deprecated
&.is-x-small {
@extend %button--x-small;
}
}
&.is-alt {
@extend %button--alt;
}
&.is-alt.is-secondary {
@extend %button--alt--secondary;
}
&.is-alt.is-tertiary {
@extend %button--alt--tertiary;
}
}
$button_font-size: 1rem !default;
$button_line-height: $_line-height !default;
$button_padding: .25em 1.2em !default;
$button_padding--small: .15em 1em !default;
$button_padding--large: .35em 1.6em !default;
$button_gutter: .75ch !default;
$button_border-width: 2px !default;
$button_border-radius: $_border-radius !default;
$button_baseline-shift: .025em !default; // For align text vertically
$button_baseline-shift--small: -.005em !default; // For align text vertically
$button_baseline-shift--large: 0 !default; // For align text vertically
$button-styles: (
padding: $button_padding,
font-size: $button_font-size,
line-height: $button_line-height,
font-weight: $_font-weight,
border-radius: $button_border-radius,
border-style: solid,
border-width: $button_border-width,
transition-property: (color, background, border-color),
transition-duration: $_transition-duration--out,
) !default;
$button-states: ( // Define only properties, that will change
default: (
background-color: $_action-background-color,
border-color: transparent,
color: $_action-foreground-color,
box-shadow: none,
),
hover: (
background-color: $_action-background-color--hover,
color: $_action-foreground-color--hover,
transition-duration: $_transition-duration--in,
),
focus: $_focus_styles,
active: (
background-color: $_action-background-color--active,
color: $_action-foreground-color--active,
),
disabled: (
background-color: $_action-background-color--disabled !important,
color: $_action-foreground-color--disabled !important,
),
) !default;
$button-states--secondary: (
default: (
background-color: transparent,
color: $_action-color,
border-color: $_action-border-color,
box-shadow: none,
),
hover: (
background-color: $_action-background-color--hover,
color: $_action-foreground-color--hover,
border-color: $_action-border-color--hover,
),
active: (
background-color: $_action-background-color--active,
color: $_action-foreground-color--active,
border-color: $_action-border-color--active,
),
disabled: (
background-color: transparent !important,
color: $_disabled-color !important,
border-color: $_action-border-color--disabled !important,
),
) !default;
$button-states--tertiary: (
default: (
background-color: transparent,
color: $_action-color,
border-color: transparent,
box-shadow: none,
),
hover: (
background-color: $_action-background-color--hover,
color: $_action-foreground-color--hover,
),
active: (
background-color: $_action-background-color--active,
color: $_action-foreground-color--active,
),
disabled: (
background-color: transparent !important,
color: $_disabled-color !important,
),
) !default;
$button-states--danger: (
default: (
background-color: $_danger-background-color,
border-color: transparent,
color: $_danger-foreground-color,
box-shadow: none,
),
hover: (
background-color: $_danger-background-color--hover,
color: $_danger-foreground-color--hover,
transition-duration: $_transition-duration--in,
),
focus: (
box-shadow: 0 0 0 $_focus_border-width $_danger-background-color--hover,
),
active: (
background-color: $_danger-background-color--active,
color: $_danger-foreground-color--active,
),
disabled: (
background-color: $_danger-background-color--disabled !important,
color: $_danger-foreground-color--disabled !important,
),
) !default;
//***** Sizes *****//
// Define only properties, that differ from default variant
$button-styles--small: (
padding: $button_padding--small,
text-size: small,
) !default;
$button-styles--large: ( // Define only properties, that differ from default variant
padding: $button_padding--large,
text-size: large,
) !default;
%button {
@include stack-spacing();
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: $button_gutter;
vertical-align: middle;
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
outline: transparent;
@include styles($button-styles);
@include button-states();
> * {
display: block;
}
@if $button_baseline-shift != 0 {
> *:not(.icon) {
position: relative;
top: (-1 * $button_baseline-shift);
}
}
.icon {
display: block;
// Prevent button’s height to be increased by icon
margin-top: -1em;
margin-bottom: -1em;
}
&[data-icon-position="right"] {
.icon {
order: 1;
}
}
}
%button--secondary {
@extend %button;
@include button-states($button-states--secondary);
}
%button--tertiary {
@extend %button;
@include button-states($button-states--tertiary);
}
%button--danger {
@extend %button;
@include button-states($button-states--danger);
}
%button--icon-only {
padding-inline: nth($button-padding, 1) !important;
column-gap: 0;
text-decoration: none;
&::before { // Set height
content: "\00a0";
display: block;
// For browsers that not support unit "lh";
// Uses magic number because line-height can differ in sizes.
width: ($button_line-height * 1.1em);
aspect-ratio: 1;
width: 1lh;
}
.icon {
position: absolute;
margin: 0;
}
> *:not(.icon) {
@extend %visually-hidden;
}
}
%button--small {
@include styles($button-styles--small);
.icon {
width: 20px;
height: 20px;
}
@if variable-exists(button_baseline-shift--small) and $button_baseline-shift--small != 0 {
> *:not(.icon) {
top: (-1 * $button_baseline-shift--small);
}
}
}
%button--large {
@include styles($button-styles--large);
.icon {
width: 28px;
height: 28px;
}
@if variable-exists(button_baseline-shift--large) and $button_baseline-shift--large != 0 {
> *:not(.icon) {
top: (-1 * $button_baseline-shift--large);
}
}
}
.button {
@extend %button;
&.is-secondary {
@extend %button--secondary;
}
&.is-tertiary {
@extend %button--tertiary;
}
&.is-danger {
@extend %button--danger;
}
&.is-icon-only {
@extend %button--icon-only;
}
@if variable-exists(button-styles--small) and type-of($button-styles--small) == map {
&.is-small {
@extend %button--small;
}
}
@if variable-exists(button-styles--large) and type-of($button-styles--large) == map {
&.is-large {
@extend %button--large;
}
}
}