Buttons

A standard button

<button class="btn-color-action">Audit Settings</button>

This is a standard button that can be used on any element. You can add any colour you want to a button by appending it after the btn-color-*

Buttons are generated as needed, new colours do not need to be defined in advance

An anchor button

<a href="#" class="btn-color-primary">Audit Settings</a>

Icons inside buttons

Icons can be added with font awesome. You just add the icon to the button with out a span or spacing. For every sub element of button it will automatically adding internal gap.

You can add multiple icons on either side of the button text.

Icons inside normal and small buttons

<div class="flex gap-2 items-end">
    <button class="btn-color-action"><i class="fa-light fa-radar text-xl items-center"></i>Audit Settings</button>
    <button class="btn-color-action btn-size-sm"><i class="fa-light fa-radar text-l items-center"></i>Audit Settings</button>
</div>

Icons can be big or small, currently you will need to change the size of the icon when inside a smaller button.

TODO Make icons automatically scale to the size of the button they are in.

Multiple icons in button

<div class="flex gap-2 ">
        <button class="btn-color-action"><i class="fa-light fa-radar text-xl items-center"></i>Audit Settings<i class="fa-light fa-check text-xl items-center"></i></button>
        <button class="btn-color-action"><i class="fa-light fa-radar text-xl items-center"></i>Audit Settings<i class="fa-light fa-check text-xl items-center"></i></button>
        <button class="btn-color-gray-900"><i class="fa-light fa-check text-xl items-center"></i>|<i class="fa-light fa-times text-xl items-center"></i>Audit Settings</button>
</div>

Dealing with multiple buttons

When dealing with multiple buttons you will want to wrap them inside a flex container and give them some gap

You can also adjust the alignment of the buttons with justify-* on the parent

justify-start
justify-center
justify-between
justify-end

Multiple Buttons

<div class="flex gap-2 ">
<button class="btn-color-action">Audit Settings</button>
<button class="btn-color-red-500">Error</button>
<button class="btn-color-primary">Testing thing</button>
<button class="btn-color-orange">Broken</button>
<button class="btn-color-indigo-600">Indigo Button</button>
</div>

Justify-center

<div class="flex gap-2 justify-center">
    <button class="btn-color-action">Audit Settings</button>
    <button class="btn-color-red-500">Error</button>
    <button class="btn-color-primary">Testing thing</button>
    <button class="btn-color-orange">Broken</button>
    <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Justify-end

<div class="flex gap-2 justify-end">
    <button class="btn-color-action">Audit Settings</button>
    <button class="btn-color-red-500">Error</button>
    <button class="btn-color-primary">Testing thing</button>
    <button class="btn-color-orange">Broken</button>
    <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Justify-between

<div class="flex gap-2 justify-end">
    <button class="btn-color-action">Audit Settings</button>
    <button class="btn-color-red-500">Error</button>
    <button class="btn-color-primary">Testing thing</button>
    <button class="btn-color-orange">Broken</button>
    <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Justify-around

<div class="flex gap-2 justify-around">
    <button class="btn-color-action">Audit Settings</button>
    <button class="btn-color-red-500">Error</button>
    <button class="btn-color-primary">Testing thing</button>
    <button class="btn-color-orange">Broken</button>
    <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Equal width buttons

If you have some collections of buttons that you want them all to be same width you can use an inline grid tricks.

Inline grid by default will only take up as much space as its largest child.

For vertical buttons we force it to use a single column layout with grid-cols-1

For horizontal we use grid-flow-col and auto-cols-fr to create and over flow columns. This results in all the buttons lining up horizontally and being equal widths.

Vertical equal width buttons

<div class="inline-grid gap-2 grid-cols-1">
        <button class="btn-color-action">Mega Audit Settings</button>
        <button class="btn-color-red-500">A</button>
        <button class="btn-color-primary">Testing thing</button>
        <button class="btn-color-orange">Broken</button>
        <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Equal width buttons

<div class="inline-grid gap-2 grid-flow-col auto-cols-fr">
    <button class="btn-color-action">Mega Audit Settings</button>
    <button class="btn-color-red-500">A</button>
    <button class="btn-color-primary">Testing thing</button>
    <button class="btn-color-orange">Broken</button>
    <button class="btn-color-indigo-600">Indigo Button</button>
</div>

Outline buttons

Outline buttons are generated in the uno.config.js.

What ever colour you set in the foreground of the button it then renders as the border, and then applies it as transparent background.

Group of outline buttons

<div class="flex gap-2 py-2 justify-center">
    <button class="btn-outline-action">Audit Settings</button>
    <button class="btn-outline-red-500">Error</button>
    <button class="btn-outline-primary">Testing thing</button>
    <button class="btn-outline-orange">Broken</button>
    <button class="btn-outline-indigo-600">Broken</button>
    <button class="btn-outline-grey">Broken</button>
  </div>

Like all other buttons you can add icons and treat them like a standard button.

Outline examples

<div class="flex gap-2 py-2 justify-center">
    <button class="btn-outline-action">Audit Settings</button>
    <button class="btn-outline-red-500">Error</button>
    <button class="btn-outline-primary">Testing thing</button>
    <button class="btn-outline-orange">Broken</button>
    <button class="btn-outline-indigo-600">Broken</button>
    <button class="btn-outline-grey">Broken</button>
  </div>