Moxi Design System

# Badges

A Badge can be used as a standalone component, or it can wrap another element in order to place itelf in a corner of that element.

Standalone Badges
Anchored Badges
Notifications Announcements 
<section class="mds">
  <div class="mt-10">
    <strong>Standalone Badges</strong>
    <div class="flex items-center my-20 space-x-20">
      <mx-badge badge-class="bg-blue-500 text-white" value="Pending" squared />
      <mx-badge badge-class="bg-red-800 text-white" value="8" />
      <mx-badge badge-class="bg-yellow-200" value="999+" />
      <mx-badge badge-class="bg-green-200 text-green-800" icon="ph ph-star" value="Popular" squared />
      <mx-badge badge-class="text-green-500" indicator />
      <mx-badge badge-class="text-black" indicator="square" />
      <mx-badge badge-class="text-yellow-300" indicator="triangle-up" />
      <mx-badge badge-class="text-yellow-600" indicator="hexagon" />
      <mx-badge badge-class="text-red-600" indicator="triangle-down" />
      <mx-badge badge-class="text-blue-400" indicator="star" />
    </div>
    <strong>Anchored Badges</strong>
    <div class="flex items-center my-20 space-x-20">
      <mx-badge badge-class="bg-purple-500 text-white" value="237">
        <mx-button btn-type="simple" icon="ph ph-bell">Notifications</mx-button>
      </mx-badge>
      <mx-badge badge-class="bg-red-500 text-white" icon="mds-x" bottom offset="10">
        <mx-icon-button icon="ph ph-video-camera" el-aria-label="Camera Settings" />
      </mx-badge>
      <mx-badge badge-class="text-red-600" indicator offset="4">
        <mx-button btn-type="simple">Announcements</mx-button>
      </mx-badge>
      <mx-badge badge-class="text-yellow-300" indicator="star" top left offset="12">
        <mx-icon-button icon="mds-user-circle" el-aria-label="User Profile" />
      </mx-badge>
      <mx-badge badge-class="bg-blue-700 text-white" value="3" bottom left offset="10">
        <mx-icon-button icon="ph ph-shopping-cart" el-aria-label="Cart (3)" />
      </mx-badge>
    </div>
  </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# mx-badge

# Properties

Property Attribute Description Type Default
badgeClass badge-class Additional classes to add to the badge itself string undefined
bottom bottom Anchor the badge to the bottom of the wrapped content boolean false
icon icon Class name of icon string undefined
indicator indicator Render as a small indicator shape with no inner text. If the prop is present, but no string value is passed, the shape will default to circle. "hexagon" \| "square" \| "star" \| "triangle-down" \| "triangle-up" \| boolean undefined
left left Anchor the badge to the left of the wrapped content boolean false
offset offset Offset badge inward by this many pixels (e.g. 10 for icon buttons) number 0
squared squared Make the corners a little more square (best for standalone text) boolean false
value value The value to display inside the badge any undefined

# Dependencies

# Used by

# Graph

graph TD;
  mx-tab --> mx-badge
  style mx-badge fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Banners →