Quantum | Buttons

Button Solid

Button solid yang mendukung berbagai status aksi.

                                                    
        <button type="button" class="btn btn_primary">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </button>

        <button type="button" class="btn btn_default">
            <span class="icon icon-plus-circle-solid"></span> Default
        </button>

        <button type="button" class="btn btn_danger">
            <span class="icon icon-plus-circle-solid"></span> Danger
        </button>

        <button type="button" class="btn btn_warning">
            <span class="icon icon-plus-circle-solid"></span> Warning
        </button>

        <button type="button" class="btn btn_helper">
            <span class="icon icon-plus-circle-solid"></span> Helper
        </button>

        <button type="button" class="btn btn_success">
            <span class="icon icon-plus-circle-solid"></span> Success
        </button>

Button Outline

Button tanpa background, dengan varian style border.

                                                    
        <button type="button" class="btn btn_outline-primary">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </button>

        <button type="button" class="btn btn_outline-default">
            <span class="icon icon-plus-circle-solid"></span> Default
        </button>

        <button type="button" class="btn btn_outline-danger">
            <span class="icon icon-plus-circle-solid"></span> Danger
        </button>

        <button type="button" class="btn btn_outline-warning">
            <span class="icon icon-plus-circle-solid"></span> Warning
        </button>

        <button type="button" class="btn btn_outline-helper">
            <span class="icon icon-plus-circle-solid"></span> Helper
        </button>

        <button type="button" class="btn btn_outline-success">
            <span class="icon icon-plus-circle-solid"></span> Success
        </button>

Button Text

Button text tanpa style background dan border.

                                                    
        <button type="button" class="btn btn_text-primary">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </button>

        <button type="button" class="btn btn_text-warning">
            <span class="icon icon-plus-circle-solid"></span> Warning
        </button>

        <button type="button" class="btn btn_text-danger">
            <span class="icon icon-plus-circle-solid"></span> Danger
        </button>

        <button type="button" class="btn btn_text-helper">
            <span class="icon icon-plus-circle-solid"></span> Helper
        </button>

        <button type="button" class="btn btn_text-success">
            <span class="icon icon-plus-circle-solid"></span> Success
        </button>

        <button type="button" class="btn btn_text-default">
            <span class="icon icon-plus-circle-solid"></span> Default
        </button>

Button Value

Button dapat memilih value yang akan ditampilkan Icon saja, Text saja, atay Icon dengan Text

                                                    
        <button type="button" class="btn btn_primary btn_icon-only">
            <span class="icon icon-plus-circle-solid"></span>
        </button>

        <button type="button" class="btn btn_primary">
            Button
        </button>

        <button type="button" class="btn btn_primary">
            <span class="icon icon-plus-circle-solid"></span> Button
        </button>

Button Size

Button tersedia dalam ukuran small, normal, large.

                                                    
        <button type="button" class="btn btn_primary btn_small">
            <span class="icon icon-plus-circle-solid"></span> Small
        </button>

        <button type="button" class="btn btn_primary btn_large">
            <span class="icon icon-plus-circle-solid"></span> Large
        </button>

Disabled Button

Membuat button menjadi tidak aktif (inactive).

                                                    
        <button type="button" class="btn btn_primary disabled">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </button>
        <button type="button" class="btn btn_outline-primary disabled">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </button>

Button Link

Link menggunakan style seperti button.

Primary Primary

                                                    
        <a href="/#" class="btn btn_primary">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </a>
        <a href="/#" class="btn btn_outline-primary">
            <span class="icon icon-plus-circle-solid"></span> Primary
        </a>