BUTTONS
Buttons are components user can click to perform an action and interact
with the website. Oxygen provides 4 types of buttons namely:
To use these buttons in your project import the below stylesheet.
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 ButtonsUse the base class
buttonto generate a simple button. Oxygen provides 3 types of solid buttons namely: primary, secondary and a danger button.
Use the classprimary-button | secondary-button | danger-buttonto 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 ButtonsUse the base class
buttonto generate a simple button. Oxygen provides 3 types of solid buttons namely: primary, secondary and a danger button.
Use the classprimary-button-outlined | secondary-button-outlined | danger-button-outlinedto 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 IconsUse the base class
buttonto 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 ButtonsFloating 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 classfloat-buttonto use it.<div class="button-float-container"> <button class="m-1 float-button primary-button"> <i class="fas fa-plus"></i> </button> </div>