Badge

Small count or label that appears on another element, often used to display notifications or status information.

Class name	Type
`.prs-badge`	Component	Container
`.prs-badge-info`	Modifier	Aqua variant
`.prs-badge-success`	Modifier	Green variant
`.prs-badge-warning`	Modifier	warning variant
`.prs-badge-danger`	Modifier	Red variant
`.prs-badge-current`	Modifier	Border and text color is inherited
`.prs-badge-pill`	Modifier	Full radius
`.prs-badge-sharp`	Modifier	No radius

Default
```
<div class="prs-badge">Label</div>
```

Info

<div class="prs-badge prs-badge-info">Label</div>

Success

<div class="prs-badge prs-badge-success">Label</div>

Warning

<div class="prs-badge prs-badge-warning">Label</div>

Danger

<div class="prs-badge prs-badge-danger">Label</div>

Pill

<div class="prs-badge prs-badge-pill">Label</div>

Sharp

<div class="prs-badge prs-badge-sharp">Label</div>

Current

The badge border and text color will match whatever parent element color is applied.
```
<span class="prs-badge prs-badge-sharp prs-badge-current">In Progress</span>
```

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-badge {
  border: 1px solid var(--prs-c-gray-300);
  padding: 0.1875rem 0.5rem;
  background-color: var(--prs-c-gray-100);
  color: var(--prs-c-gray-700);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--prs-radius-btn);

  &.prs-badge-pill {
    border-radius: 9999px;
  }

  &.prs-badge-sharp {
    border-radius: 0;
  }

  &.prs-badge-current {
    border-color: currentColor;
    background: transparent;
    color: currentColor;
  }

  &.prs-badge-info {
    border-color: var(--prs-c-info);
    background-color: var(--prs-c-info-100);
    color: var(--prs-c-info-900);
  }

  &.prs-badge-success {
    border-color: var(--prs-c-success);
    background-color: var(--prs-c-success-100);
    color: var(--prs-c-success-900);
  }

  &.prs-badge-warning {
    border-color: var(--prs-c-warning-600);
    background-color: var(--prs-c-warning-100);
    color: var(--prs-c-warning-900);
  }

  &.prs-badge-danger {
    border-color: var(--prs-c-danger);
    background-color: var(--prs-c-danger-100);
    color: var(--prs-c-danger-900);
  }
}

Coming soon...