Buttons communicate actions that users can take. They are typically placed throughout your UI, and typically how a user interacts with your web-app. To use buttons, you need to add the class "btn".

Primary Button

To use primary button or primary accent button you need to use the class "prim-btn" or "prim-acc-btn" respectively.

<button class="btn prim-btn">Primary</button>
                            <button class="btn prim-acc-btn">Primary Accent</button>

Secondary Button

To use secondary button or secondary accent button you need to use the class "sec-btn" or "sec-acc-btn" respectively.

<button class="btn sec-btn">Secondary</button>
                            <button class="btn sec-acc-btn">Secondary Accent</button>

Accent, Link and Gray Buttons

To use accent, link and Gray button, you need to use the class "acc-btn", "link-btn", "gray-btn" respectively.

<button class="btn acc-btn">Accent</button>
                             <button class="btn link-btn">Link</button>
                            <button class="btn gray-btn">Gray</button>

Floating Action Button

To use Floating Action Button or FABs, you need to use the class "fab-btn" and copy paste the code below.

<button class="fab-btn flex-column">
<img class="fab-icon" src="/CSS/Components/assets/edit.png">
</button>>

Disabled and Round Buttons

To Disable buttons or make them round, you need to add the class "btn-disabled" & "round-btn" respectively.

<button class="btn prim-btn btn-disabled">Primary</button>
                            <button class="btn prim-acc-btn btn-round">Primary Accent</button>