<template xmlns="http://www.w3.org/1999/html">
    <div style="padding: 10px; border: 1px solid black; margin: 5px; display: grid; grid-template: auto / max-content auto max-content auto max-content; overflow: auto; align-items: center">
        <label>Primary Button</label>
        <div><button class="primary">Button</button></div>
        <label>Primary Button Disabled</label>
        <div><button class="primary" disabled>Button</button></div>
        <span>Usage: &lt;button class="primary"&gt;Button&lt;/button&gt;</span>
        <label>Input Type Button</label>
        <div><input type="button" class="primary" value="Button"></div>
        <label>Input Type Button Disabled</label>
        <div><input type="button" class="primary" disabled value="Button"></div>
        <span>Usage: &lt;input type="button" class="primary" value="Button"&gt;</span>
    </div>
    <div style="padding: 10px; border: 1px solid black; margin: 5px; display: grid; grid-template: auto / max-content auto max-content auto max-content; overflow: auto; align-items: center">
        <label>Default Button</label>
        <div><button>Button</button></div>
        <label>Default Button Disabled</label>
        <div><button disabled>Button</button></div>
        <span>Usage: &lt;button&gt;Button&lt;/button&gt;</span>
        <label>Input Type Button</label>
        <div><input type="button" value="Button"></div>
        <label>Input Type Button Disabled</label>
        <div><input type="button" value="Button" disabled></div>
        <span>Usage: &lt;input type="button" value="Button"&gt;</span>
    </div>
    <div style="padding: 10px; border: 1px solid black; margin: 5px; display: grid; grid-template: auto / max-content auto max-content auto max-content; overflow: auto; align-items: center">
        <label>Auxiliary Button</label>
        <div><button class="aux">Button</button></div>
        <label>Auxiliary Button Disabled</label>
        <div><button disabled class="aux">Button</button></div>
        <span>Usage: &lt;button class="aux"&gt;Button&lt;/button&gt;</span>
        <label>Input Type Button</label>
        <div><input type="button" class="aux" value="Button"></div>
        <label>Input Type Button Disabled</label>
        <div><input type="button" class="aux" value="Button" disabled></div>
        <span>Usage: &lt;input type="button" class="aux" value="Button"&gt;</span>
    </div>
</template>