glide-design-system/src/lib/components/badge/badge.module.css

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

.badgeContainer {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}

.badgeIcon {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

.badge {
  display: flex;
  align-items: center;
  position: absolute;
  box-sizing: border-box;
  min-width: 20px;
  padding: 0px 6px;
  min-height: 20px;
  border-radius: 10px;
  background-color: #1b3764;
  color: rgb(255, 255, 255);
  top: 0px;
  right: 0px;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
  font-family: "Roboto, sans-serif";
  font-size: 14px;
}

.noLabel {
  display: flex;
  align-items: center;
  position: absolute;
  box-sizing: border-box;
  min-width: 12px;
  padding: 0px 6px;
  min-height: 12px;
  border-radius: 10px;
  background-color: #1b3764;
  color: rgb(255, 255, 255);
  top: 0px;
  right: 0px;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0%;
  font-family: "Roboto, sans-serif";
  font-size: 14px;
}