@penaprieto/design-system/dist/components/Badge/Badge.css

Multi-brand React design system with design tokens from Figma

/* Badge wrapper */
.ds-badge-wrapper {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Base Badge */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-x-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-weight: var(--body-x-small-strong-fontWeight, 700);
  line-height: 1;
  border-radius: var(--br-full, 9999px);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Positioned badge (with children) */
.ds-badge-wrapper .ds-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}

/* Sizes */
.ds-badge--small {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}

.ds-badge--medium {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
}

/* Dot variant */
.ds-badge--dot {
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--br-full, 9999px);
}

.ds-badge--dot.ds-badge--medium {
  width: 10px;
  height: 10px;
}

/* Variants - Using alert tokens for consistency */
.ds-badge--primary {
  background-color: var(--alert-error-bg);
  color: var(--semantic-text-error);
  border: 1px solid var(--alert-error-border);
}

.ds-badge--success {
  background-color: var(--alert-success-bg);
  color: var(--semantic-text-success);
  border: 1px solid var(--alert-success-border);
}

.ds-badge--error {
  background-color: var(--alert-error-bg);
  color: var(--semantic-text-error);
  border: 1px solid var(--alert-error-border);
}

.ds-badge--warning {
  background-color: var(--alert-warning-bg);
  color: var(--semantic-text-warning);
  border: 1px solid var(--alert-warning-border);
}

.ds-badge--neutral {
  background-color: var(--alert-info-bg);
  color: var(--semantic-text-corp-primary);
  border: 1px solid var(--alert-info-border);
}

/* Standalone badge (without children) */
.ds-badge--standalone {
  position: static;
  transform: none;
}