Button

    @import url("https://openui.netlify.app/pages/components/Button/button.css");
    <link rel="stylesheet" 
    href="https://openui.netlify.app/pages/components/Button/button.css">
            

Solid Buttons

The solid button component is available in three variants btn-primary, btn-secondary and btn-danger.

    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-danger">Danger</button>
            

Outline Buttons

The button component is available in three variants btn-outline-primary, btn-outline-secondary and btn-outline-danger.

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

Icon Buttons

Add to cart Delete

Add the btn-icon class to the button element and a img tag with the link to the icon.

    <button class="btn btn-icon btn-primary">
        <img src="..." alt=""/>
        <span>Add to cart</span>
    </button>

    <button class="btn btn-icon btn-danger">
        <img src="..." alt=""/>
        <span>Delete</span>
    </button>