Contained
Example
Code
<div class="p-4">
<button class="button">Enabled</button>
<button class="button" disabled>Disabled</button>
<button class="button button--hover">Hover</button>
<button class="button button--active">Pressed</button>
</div>
<div class="p-4 bg-just-black">
<button class="button">Enabled</button>
<button class="button" disabled>Disabled</button>
<button class="button button--hover">Hover</button>
<button class="button button--active">Pressed</button>
</div>
Outlined
Example
Code
<div class="p-4">
<button class="button button--outlined">Enabled</button>
<button class="button button--outlined" disabled>Disabled</button>
<button class="button button--outlined button--hover">Hover</button>
<button class="button button--outlined button--active">Pressed</button>
</div>
<div class="p-4 bg-just-black">
<button class="button button--dark button--outlined">Enabled</button>
<button class="button button--dark button--outlined" disabled>
Disabled
</button>
<button class="button button--dark button--outlined button--hover">
Hover
</button>
<button class="button button--dark button--outlined button--active">
Pressed
</button>
</div>
Text
Example
Code
<div class="p-4">
<button class="button button--text">Enabled</button>
<button class="button button--text" disabled>Disabled</button>
<button class="button button--text button--hover">Hover</button>
<button class="button button--text button--active">Pressed</button>
</div>
<div class="p-4 bg-just-black">
<button class="button button--dark button--text">Enabled</button>
<button class="button button--dark button--text" disabled>Disabled</button>
<button class="button button--dark button--text button--hover">Hover</button>
<button class="button button--dark button--text button--active">
Pressed
</button>
</div>
Anchor tag
Example
Contained
Outlined
Text
Code
<a class="button" href="#">Contained</a>
<a class="button button--outlined" href="#">Outlined</a>
<a class="button button--text" href="#">Text</a>
Span
Example
Contained
Outlined
Text
Code
<span class="button">Contained</span>
<span class="button button--outlined">Outlined</span>
<span class="button button--text">Text</span>
Input type button
Example
Code
<input type="button" class="button" value="Contained" />
<input type="button" class="button button--outlined" value="Outlined" />
<input type="button" class="button button--text" value="Text" />
Responsive Buttons
Example
Code
<button class="button w-full md:w-auto">Enabled</button>
<button class="button w-auto md:w-full">Enabled</button>