Quantum | Badges

Badge Solid

Badge dengan warna solid untuk labeling status.

Badge Label Badge Label Badge Label Badge Label Badge Label

                                                    
    <span class="badge badge_default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_helper">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_success">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_warning">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_danger">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>

Badge Outline

Badge dengan outline untuk labeling status.

Badge Label Badge Label Badge Label Badge Label Badge Label

                                                    
    <span class="badge badge_outline-default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_outline-helper">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_outline-success">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_outline-warning">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_outline-danger">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>

Badge Secondary

Badge secondary untuk labeling status.

Badge Label Badge Label Badge Label Badge Label Badge Label

                                                    
    <span class="badge badge_secondary-default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_secondary-helper">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_secondary-success">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_secondary-warning">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_secondary-danger">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>

Badge Rounded

Badge dengan bentuk rounded untuk labeling status.

Badge Label Badge Label Badge Label

                                                    
    <span class="badge badge_rounded badge_default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_rounded badge_outline-default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>
    <span class="badge badge_rounded badge_secondary-default">
        <span class="icon icon-information-circle-solid"></span>Badge Label
    </span>

Badge Size

Badge menyediakan ukuran normal dan kecil.

Badge Normal Badge Small

                                                    
    <span class="badge badge_rounded badge_default">
        <span class="icon icon-information-circle-solid"></span>Badge Normal
    </span>
    <span class="badge badge_rounded badge_default badge_small">
        <span class="icon icon-information-circle-solid"></span>Badge Small
    </span>