Component Listing

BUTTONS

Buttons are components user can click to perform an action and interact with the website. Oxygen provides 4 types of buttons namely:

Primary Buttons | Secondary
                        Buttons | Buttons with Icons | Floating Buttons

.
To use these buttons in your project import the below stylesheet.


@import url("https://oxygen-ui-component-library.netlify.app/components/button/button.css")

Solid Buttons

Use the base class button to generate a simple button. Oxygen provides 3 types of solid buttons namely: primary, secondary and a danger button.
Use the class primary-button | secondary-button | danger-button to use the appropriate button.
```
<div class="button-solid-container">
    <button class="m-1 button primary-button">Primary Button</button>
    <button class="m-1 button secondary-button">Secondary Button</button>
    <button class="m-1 button danger-button">Danger Button</button>
</div> 
                        
```
Outlined Buttons

Use the base class button to generate a simple button. Oxygen provides 3 types of solid buttons namely: primary, secondary and a danger button.
Use the class primary-button-outlined | secondary-button-outlined | danger-button-outlined to use the appropriate button.
```
<div class="button-outlined-container">
    <button class="m-1 button primary-button-outlined">Primary Button</button>
    <button class="m-1 button secondary-button-outlined">Secondary Button</button>
    <button class="m-1 button danger-button-outlined">Danger Button</button>
</div>
                        
```

Button with Icons

Use the base class button to generate a simple button.


<div class="button-icon-container flex-row">
    <button class="m-1 button primary-button flex-row">
        <i class="mr-1 fas fa-shopping-cart"></i>
        <span>Add to Cart</span>
    </button>
    <button class="m-1 button danger-button flex-row">
        <i class="mr-1 fas fa-trash"></i>
        <span>Delete</span>
    </button>
</div>

Floating Buttons

Floating action buttons are used to perform primary or common actions on the screen. Circular in shape, they remain fixed on the bottom right corner of the screen and float on top of all content.
Use the class float-button to use it.
```
<div class="button-float-container">
    <button class="m-1 float-button primary-button">
        <i class="fas fa-plus"></i>
    </button>
</div>             
                        
```