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-bgColor-contextRed">
    Failed
</span>

<br>

<button class="button--primary">
    Primary button
    <span class="badge badge--dark">
        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>

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