---
extends: _layouts.markdown
title: "Buttons"
---

# Buttons

<div class="mb-4">
    <button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
        Save
    </button>
    <button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
        Save
    </button>
    <button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
        Save
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
        Save
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
        Disabled
    </button>
</div>
<div class="mb-4">
    <button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
        Save
    </button>
    <button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
        Disabled
    </button>
</div>