@radix-ui/themes/src/components/badge.css

[](https://radix-ui.com/themes)

.rt-Badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-medium);
  font-style: normal;
  flex-shrink: 0;
  line-height: 1;

  /* Make sure that the height is not stretched in a Flex/Grid layout */
  height: fit-content;
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-Badge {
    &:where(.rt-r-size-1) {
      font-size: var(--font-size-1);
      line-height: var(--line-height-1);
      letter-spacing: var(--letter-spacing-1);
      padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
      gap: calc(var(--space-1) * 1.5);
      border-radius: max(var(--radius-1), var(--radius-full));
    }
    &:where(.rt-r-size-2) {
      font-size: var(--font-size-1);
      line-height: var(--line-height-1);
      letter-spacing: var(--letter-spacing-1);
      padding: var(--space-1) var(--space-2);
      gap: calc(var(--space-1) * 1.5);
      border-radius: max(var(--radius-2), var(--radius-full));
    }
    &:where(.rt-r-size-3) {
      font-size: var(--font-size-2);
      line-height: var(--line-height-2);
      letter-spacing: var(--letter-spacing-2);
      padding: var(--space-1) calc(var(--space-2) * 1.25);
      gap: var(--space-2);
      border-radius: max(var(--radius-2), var(--radius-full));
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* solid */

.rt-Badge:where(.rt-variant-solid) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);

  &::selection {
    background-color: var(--accent-7);
    color: var(--accent-12);
  }

  &:where(.rt-high-contrast) {
    background-color: var(--accent-12);
    color: var(--accent-1);

    &::selection {
      background-color: var(--accent-a11);
      color: var(--accent-1);
    }
  }
}

/* surface */

.rt-Badge:where(.rt-variant-surface) {
  background-color: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-a6);
  color: var(--accent-a11);

  &:where(.rt-high-contrast) {
    color: var(--accent-12);
  }
}

/* soft */

.rt-Badge:where(.rt-variant-soft) {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
  &:where(.rt-high-contrast) {
    color: var(--accent-12);
  }
}

/* outline */

.rt-Badge:where(.rt-variant-outline) {
  box-shadow: inset 0 0 0 1px var(--accent-a8);
  color: var(--accent-a11);
  &:where(.rt-high-contrast) {
    box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
    color: var(--accent-12);
  }
}