Prose v1

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 Yellow 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-400);
  padding: 0.1875rem 0.5rem;
  background-color: var(--prs-c-gray-200);
  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-aqua-400);
    background-color: var(--prs-c-aqua-200);
    color: var(--prs-c-aqua-600);
  }

  &.prs-badge-success {
    border-color: var(--prs-c-green-400);
    background-color: var(--prs-c-green-200);
    color: var(--prs-c-green-600);
  }

  &.prs-badge-warning {
    border-color: var(--prs-c-yellow-400);
    background-color: var(--prs-c-yellow-200);
    color: var(--prs-c-yellow-600);
  }

  &.prs-badge-danger {
    border-color: var(--prs-c-red-400);
    background-color: var(--prs-c-red-200);
    color: var(--prs-c-red-600);
  }
}

Figma

Coming soon...