Components
Utilities for style elements as common buttons.
Basic
LinkStroked
LinkTonal
LinkFilled
LinkRaised
Link
<section class="bg-surface-container rounded-2xl p-4 flex flex-col">
<div class="flex items-center gap-4 py-2">
<p class="font-bold">Basic</p>
<button class="md-button">Basic</button>
<button disabled class="md-button">Disabled</button>
<a href="https://www.google.com/" target="_blank" class="md-button">Link</a>
</div>
<hr class="text-primary"/>
<div class="flex items-center gap-4 py-2">
<p class="font-bold">Stroked</p>
<button class="md-button-outlined">Basic</button>
<button disabled class="md-button-outlined">Disabled</button>
<a href="https://www.google.com/" target="_blank" class="md-button-outlined">Link</a>
</div>
<hr class="text-primary"/>
<div class="flex items-center gap-4 py-2">
<p class="font-bold">Tonal</p>
<button class="md-button-tonal">Basic</button>
<button disabled class="md-button-tonal">Disabled</button>
<a href="https://www.google.com/" target="_blank" class="md-button-tonal">Link</a>
</div>
<hr class="text-primary"/>
<div class="flex items-center gap-4 py-2">
<p class="font-bold">Filled</p>
<button class="md-button-filled">Basic</button>
<button disabled class="md-button-filled">Disabled</button>
<a href="https://www.google.com/" target="_blank" class="md-button-filled">Link</a>
</div>
<hr class="text-primary"/>
<div class="flex items-center gap-4 py-2">
<p class="font-bold">Raised</p>
<button class="md-button-elevated">Basic</button>
<button disabled class="md-button-elevated">Disabled</button>
<a href="https://www.google.com/" target="_blank" class="md-button-elevated">Link</a>
</div>
</section>