Logotype
JM Admin / Components / Badge
User

Badge Optional

A block style label, link or navigation. This component is usually used to indicate a status, notification or event related to the current page.

Features
  • Can be text (<span>), a link (<a>) or grouped links (<details>), displayed in a dropdown menu.
  • Can have an icon, via the themes icon font (class="icon-…).
  • Can include a separate label (<label>), usually used to display values.
  • Can include a separate link (<a>), usually used for removal, help or other related actions.
  • Can include a separate notification text (<span class="notification">).
  • Can be text only, icon only or both. All variants works with the optional label, link and notification text.
  • Supports alert colors.
  • CSS only, no Javascript. Opening/closing of the dropdown menu works with keyboard, mouse and touch.
Configuration
  • Sass file: components/_badge.scss
  • Include the Sass file in theme.scss: @use "components/badge";

Examples

Variants: Icon only, text only, icon and text, icon only with label, icon and text with label.

View source for Html code.

Text:
Html Html Language
Text with inline link:
3 Html Html Language
Link:
Html Html Language
Link with notification text:
3 Html3 Html3 3 Language3
Grouped links:
Language
Language
Language

For colored variants, see Alert.

Wrapper element

To add vertical space between multiple adjacent badges, place them in a <section class="badges"> element.