Chip

Small, interactive element that represents an input, attribute, or action.

Class name Type
.prs-chip Component Container
.prs-chip-label Part Container
.prs-chip_active State Active/Selected
.prs-chip_hover State Manually apply visual hover
.prs-chip_focus State Manually apply visual focus
.prs-chip_disabled State Manually apply visual disabled

  • Default 

    <div class="prs-chip">
  <span class="prs-chip-label">Default</span>
</div>

<div class="prs-chip prs-chip_active">
  <span class="prs-chip-label">Active</span>
</div>

<div class="prs-chip" role="button" tabindex="0">
  <span class="prs-chip-label">Clickable Default</span>
</div>

<div class="prs-chip prs-chip_active" role="button" tabindex="0">
  <span class="prs-chip-label">Clickable Active</span>
</div>

  • Hover 

    <div class="prs-chip prs-chip_hover" role="button" tabindex="0">
  <span class="prs-chip-label">Default</span>
</div>

<div class="prs-chip prs-chip_active prs-chip_hover" role="button" tabindex="0">
  <span class="prs-chip-label">Active</span>
</div>

  • Focus 

    <div class="prs-chip prs-chip_focus" role="button" tabindex="0">
  <span class="prs-chip-label">Default</span>
</div>

<div class="prs-chip prs-chip_active prs-chip_focus" role="button" tabindex="0">
  <span class="prs-chip-label">Active</span>
</div>

  • Action

    Use a .icon in the first child slot.

    <div class="prs-chip" role="button" tabindex="0">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" focusable="false" role="img">
      <use href="/_assets/prs-icons.svg#nav-suitcase" />
    </svg>
  </span>
  <span class="prs-chip-label">Default</span>
</div>

<div class="prs-chip prs-chip_active" role="button" tabindex="0">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" focusable="false" role="img">
      <use href="/_assets/prs-icons.svg#nav-suitcase" />
    </svg>
  </span>
  <span class="prs-chip-label">Active</span>
</div>

  • Input

    Use a .close in the last child slot. Optionally use a .icon in the first child slot.

    <div class="prs-chip" role="button" tabindex="0">
  <span class="prs-chip-label">Default</span>
  <span class="close"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg></span>
</div>

<div class="prs-chip" role="button" tabindex="0">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" focusable="false" role="img">
      <use href="/_assets/prs-icons.svg#nav-suitcase" />
    </svg>
  </span>
  <span class="prs-chip-label">Default</span>
  <span class="close"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg></span>
</div>

<div class="prs-chip prs-chip_active" role="button" tabindex="0">
  <span class="prs-chip-label">Active</span>
  <span class="close"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg></span>
</div>

<div class="prs-chip prs-chip_active" role="button" tabindex="0">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" focusable="false" role="img">
      <use href="/_assets/prs-icons.svg#nav-suitcase" />
    </svg>
  </span>
  <span class="prs-chip-label">Active</span>
  <span class="close"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg></span>
</div>

<button class="prs-chip" disabled>
  <span class="prs-chip-label">Disabled</span>
</button>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-chip {
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
  background-color: var(--prs-c-gray-200);
  color: var(--prs-c-gray-900);
  font-size: 0.75rem;
  line-height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: default;
  border-radius: var(--prs-radius-badge);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);

  &[role=button]:hover,
  &.prs-chip_hover,
  &:where(button):hover {
    background-color: var(--prs-c-gray-300);
    color: var(--prs-c-gray-900);
    cursor: pointer;
  }

  &:focus-visible,
  &.prs-chip_focus {
    outline: 2px solid var(--prs-c-primary);
    outline-offset: 1px;
  }

  .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--prs-c-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .close {
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--prs-c-gray-600);
    color: var(--prs-c-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--prs-radius-badge);
  }

  &.prs-chip_active {
    background-color: var(--prs-c-primary-100);
    color: var(--prs-c-primary-800);

    &[role=button]:hover,
    &.prs-chip_hover,
    &:where(button):hover {
      background-color: var(--prs-c-primary-200);
      color: var(--prs-c-gray-900);
      cursor: pointer;
    }

    .icon {
      color: currentColor;
    }

    .close {
      background-color: var(--prs-c-primary-700);
      color: var(--prs-c-primary-100);
    }
  }

  &:disabled,&.prs-chip_disabled {
    pointer-events: none;
  }
}

.prs-chip-label {
  padding: 0 0.25rem;
  display: block;
}

Coming soon...