Badge

A badge is a characteristic mark and is used to emphasize an object or another actual information of an item or folder.
Badges have two default styles and can be customized with the available CSS helper classes.

Badge

Usergroup: FancyUser User type: Global User mdsp:core:StandardUser Users 123 Failed
Primary link button, disabled 321
<span class="badge badge--dark">
    Usergroup: FancyUser
</span>

<span class="badge badge--light">
    User type: Global User
</span>

<span class="badge has-bgColor-accentBlueLight has-color-snow">
    mdsp:core:StandardUser
</span>

<span class="badge has-bgColor-functionalYellow has-color-accentGreenDark">
    Users
</span>

<span class="badge has-bgColor-gray100 has-color-functionalGreen">
    123
</span>

<span class="badge has-color-validationRed has-borderColor-validationRed has-bgColor-contextRed">
    Failed
</span>

<br>

<button class="button--primary">
    Primary button
    <span class="badge badge--dark has-borderColor-snow">
        123
    </span>
</button>

<a class="button button--primary is-disabled" href="#">
    Primary link button, disabled
    <span class="badge has-bgColor-functionalYellow has-color-accentGreenDark">
        321
    </span>
</a>

<button class="button--secondary">
    Secondary button
    <span class="badge has-bgColor-stateBlue100 has-color-snow">
        Category
    </span>
</button>

Badge with icon button

User group: FancyUser User type: Global User mdsp:core:StandardUser Users 123 Failed
<span class="badge badge--button badge--dark">
    User group: FancyUser
    <a href="#">
        <span class="iconMdsp cancelCircle" aria-hidden="true"></span>
    </a>
</span>

<span class="badge badge--button badge--light">
    User type: Global User
    <a href="#">
        <span class="iconMdsp cancelCircle" aria-hidden="true"></span>
    </a>
</span>

<span class="badge badge--button has-bgColor-stoneLight has-color-snow">
    mdsp:core:StandardUser
    <a href="#">
        <span class="iconMdsp cancelCircle" aria-hidden="true"></span>
    </a>
</span>

<span class="badge badge--button has-bgColor-functionalYellow has-color-accentGreenDark">
    Users
    <a href="#">
        <span class="iconMdsp attention" aria-hidden="true"></span>
    </a>
</span>

<span class="badge badge--button has-bgColor-gray100 has-color-functionalGreen">
    123
    <a href="#">
        <span class="iconMdsp addCircle" aria-hidden="true"></span>
    </a>
</span>

<span class="badge badge--button has-color-validationRed has-borderColor-validationRed has-bgColor-contextRed">
    Failed
    <a href="#">
        <span class="iconMdsp outgoingInMdsp" aria-hidden="true"></span>
    </a>
</span>

Usage

ElementClassDescription
.badge,
.badge.badge--button
.badge--dark Default styling for badge element: background color in dark gray with white foreground color.
.badge,
.badge.badge--button
.badge--light Alternative styling for badge element: background color in light gray with gray foreground color.
.badge,
.badge.badge--button
.has-color-<color name> Applies a customized foreground color to the badge element for special requirements. Any of the foreground color helper classes can be used, also in combination with the background and border color helper classes.
.badge,
.badge.badge--button
.has-bgColor-<color name> Applies a customized background color to the badge element for special requirements. Any of the background color helper classes can be used, also in combination with the foreground and border color helper classes.
.badge,
.badge.badge--button
.has-borderColor-<color name> Applies a customized border color to the badge element for special requirements. Any of the border color helper classes can be used, also in combination with the foreground and background color helper classes.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top