Prose v1

Alert

Message box that provides important information to the user, such as warnings, errors, or other notifications.

Class name Type
.prs-alert Component Container
.prs-alert-success Modifier Green variant
.prs-alert-warning Modifier Yellow variant
.prs-alert-error Modifier Red variant
.prs-alert-ghost Modifier Ghost variant
.prs-alert-content Component For content container

  • Default

    Preceding icon and ending close gadget are optional depending on the use case. Make sure you include the .prs-alert-content wrapper for the content to make sure the space, gap, and flex properties render properly.

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert" role="alert">
    <div class="icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#content-type-info-outline" />
      </svg>
    </div>
    <div class="prs-alert-content">Message slot...</div>
    <button class="close" aria-label="Close">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#nav-x" />
      </svg>
    </button>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-ghost" role="alert">
    <div class="prs-alert-content">Ghost message slot...</div>
  </div>
</div>

  • Success 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-success" role="alert">
    <div class="icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#status-circle-check-outline" />
      </svg>
    </div>
    <div class="prs-alert-content">Success message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-success prs-alert-ghost" role="alert">
    <div class="prs-alert-content">Ghost message slot...</div>
  </div>
</div>

  • Warning 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-warning" role="alert">
    <div class="icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#status-alert-outline" />
      </svg>
    </div>
    <div class="prs-alert-content">Warning message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-warning prs-alert-ghost" role="alert">
    <div class="prs-alert-content">Ghost message slot...</div>
  </div>
</div>

  • Error 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-error" role="alert">
    <div class="icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img">
        <use href="/_assets/prs-icons.svg#status-not" />
      </svg>
    </div>
    <div class="prs-alert-content">Error message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-error prs-alert-ghost" role="alert">
    <div class="prs-alert-content">Ghost message slot...</div>
  </div>
</div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-alert {
  padding: 0.75rem;
  border: 1px solid var(--prs-c-aqua);
  background-color: var(--prs-c-aqua-200);
  color: var(--prs-c-aqua);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  &.prs-alert-success {
    border-color: currentColor;
    background-color: var(--prs-c-green-200);
    color: var(--prs-c-green);
  }

  &.prs-alert-warning {
    border-color: currentColor;
    background-color: var(--prs-c-yellow-200);
    color: var(--prs-c-yellow);
  }

  &.prs-alert-error {
    border-color: currentColor;
    background-color: var(--prs-c-red-200);
    color: var(--prs-c-red);
  }

  &.prs-alert-ghost {
    border-color: transparent;
    border-radius: var(--prs-radius-alert);
  }

  .icon,
  .close {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9999px;
  }

  .icon {
    color: currentColor;
  }

  .close {
    color: var(--prs-c-gray-600);

    &:hover {
      color: var(--prs-c-gray-900);
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 1px;
    }
  }
}

.prs-alert-content {
  color: var(--prs-c-gray-900);
  flex: 1 1 0%;
}

Figma

Coming soon...