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-toast Modifier Floating alert
.prs-alert-warning Modifier Yellow variant
.prs-alert-danger Modifier Red variant
.prs-alert-ghost Modifier Ghost variant
.prs-alert-content Part 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>

  • Info 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-info" 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">Info message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-info 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>

  • Danger 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-danger" 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">Danger message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-danger prs-alert-ghost" role="alert">
    <div class="prs-alert-content">Ghost message slot...</div>
  </div>
</div>

  • Neutral 

    <div class="w-96 max-w-xs space-y-2"> <!-- <- this is just for demo purposes -->
  <div class="prs-alert prs-alert-neutral" 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">Neutral message slot...</div>
  </div>
  <!-- ghost -->
  <div class="prs-alert prs-alert-neutral 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-primary);
  background-color: var(--prs-c-primary-100);
  color: var(--prs-c-primary);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;

  &.prs-alert-info {
    border-color: currentColor;
    background-color: var(--prs-c-info-100);
    color: var(--prs-c-info-700);
  }

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

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

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

  &.prs-alert-neutral {
    border-color: currentColor;
    background-color: var(--prs-c-gray-100);
    color: var(--prs-c-gray);
  }

  &.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);
    cursor: pointer;
    transition-property: var(--prs-transition-property);
    transition-timing-function: var(--prs-transition-timing);
    transition-duration: var(--prs-transition-duration);

    &:hover,&:focus-visible {
      color: var(--prs-c-gray-950);
      outline: 2px solid currentColor;
      outline-offset: 1px;
    }
  }
}

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

Coming soon...