Button

Buttons allow users to take action and make choices with a single press.

// CSS
@import url("https://magnificentui.netlify.app/src/components/button/button.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/button/button.css">

Standard Button

These are some predefined styles for your buttons each serving its own semantic purpose. There are 5 colors to choose from primary, secondary, success, danger and warning. This can used with class "btn" as follows: btn btn--primary btn--secondary btn--success btn--danger btn--warning

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--warning">Warning</button>

Outline Button

If you want buttons which are transparent, Outline buttons can be used. btn btn--outline--primary btn--outline--secondary btn--outline--success btn--outline--danger btn--outline--warning

<button class="btn btn--outline--primary">Primary</button>
<button class="btn btn--outline--secondary">Secondary</button>
<button class="btn btn--outline--success">Success</button>
<button class="btn btn--outline--danger">Danger</button>
<button class="btn btn--outline--warning">Warning</button>

Icon and Icon with Label Button

btn btn--round btn--secondary btn--icon btn--squared btn--circular

<button class="btn btn--outline--danger btn--icon btn--round">
	Delete
	<i class="bx bxs-trash-alt"></i>
</button>
<button class="btn btn--secondary btn--icon">
	Next
	<i class="bx bx-right-arrow-alt"></i>
</button>
<button class="btn btn--outline--primary btn--icon">
	Cart
	<i class="bx bxs-cart"></i>
</button>
<button class="btn btn--primary btn--icon">
	<i class="bx bxs-cart"></i>
</button>
<button class="btn btn--primary btn--icon btn--squared">
	<i class='bx bxs-bookmarks'></i>
</button>
<button class="btn btn--secondary btn--icon btn--circular">
	<i class='bx bxs-like'></i>
</button>

Floating Action Icon and Link Button

Floating buttons are usually icon buttons that calls for an important action on the overall page. Generally located at bottom right. Magnificent UI provides few classes that makes the design look cool and clean. But the user has to explicitly define the position of the buttons according to their respective use cases. By default it is absolute to the viewport. btn btn--primary btn--icon btn--circular btn--floating

<button class="btn btn--primary btn--link">
	Link button
</button>
<button class="btn btn--icon btn--primary btn--circular btn--floating">
	<i class='bx bx-up-arrow-alt'></i>
</button>
<button class="btn btn--icon btn--primary btn--circular btn--floating">
	<i class='bx bx-chat' ></i>
</button>

Note: Used 10px as root font size.