Button

Buttons are useful in performing various actions on a single click. Different variants of buttons are present in Sapphire UI.

Primary Buttons

The default buttons are available in different variants. The .btn class needs to be added on the <button> tag. According to your requirement, you can add classes like .btn-primary, .btn-secondary, .btn-default, .btn-success, .btn-error and .btn-disable.

Copy
        <button class="btn btn-primary rounded-med space-S">Primary</button>
        <button class="btn btn-secondary rounded-med space-S">Secondary</button>
        <button class="btn btn-default rounded-med space-S">Default</button>
        <button class="btn btn-success rounded-med space-S">Success</button>
        <button class="btn btn-error rounded-med space-S">Error</button>
        <button class="btn btn-disable rounded-med space-S" disabled>Disable</button>

Outline Buttons

For outline buttons, classes like .btn-outline-primary, .btn-outline-secondary, .btn-outline-default, .btn-outline-success, .btn-outline-error and .btn-outline-disable can be added.

Copy
        <button class="btn btn-outline-primary rounded-med space-S">Primary</button>
        <button class="btn btn-outline-secondary rounded-med space-S">Secondary</button>
        <button class="btn btn-outline-default rounded-med space-S">Default</button>
        <button class="btn btn-outline-success rounded-med space-S">Success</button>
        <button class="btn btn-outline-error rounded-med space-S">Error</button>
        <button class="btn btn-outline-disable rounded-med space-S" disabled>Disable</button>

Link Buttons

Want to attach a link action, at a button tap? Use the Link Button by adding the .btn-link class. There are 3 variations primary, secondary and default. For primary, use the .btn-link-primary.

Copy
        <button class="btn-link btn-link-primary space-S">Primary</button>
        <button class="btn-link btn-link-secondary space-S">Secondary</button>
        <button class="btn-link btn-link-default space-S">Default</button>

Icon Button

The class .btn-icon needs to be added along with other classes.

Copy
        <button class="btn-icon btn-icon-primary rounded-med space-S"><i class="fa-solid fa-cart-shopping"></i>Primary</button>
        <button class="btn-icon btn-icon-secondary rounded-med space-S"><i class="fa-solid fa-floppy-disk"></i>Secondary</button>
        <button class="btn-icon btn-icon-default rounded-med space-S"><i class="fa-solid fa-download"></i>Default</button>

Floating Action Buttons

These buttons can be used by providing the class name as .btn-float.

Copy
        <button class="btn-float btn-primary rounded-med space-S"><i class="fa-solid fa-cart-shopping"></i></button>
        <button class="btn-float btn-secondary rounded-med space-S"><i class="fa-solid fa-floppy-disk"></i></button>
        <button class="btn-float btn-default rounded-med space-S"><i class="fa-solid fa-download"></i></button>