---
title: Alert
desc: Message box that provides important information to the user, such as warnings, errors, or other notifications.
ico: mdi:message-badge
keywords:
  - message
  - notification
  - toast

props:
  - class: .prs-alert
    type: component
    desc: Container
  - class: .prs-alert-success
    type: modifier
    desc: Green variant
  - class: .prs-alert-toast
    type: modifier
    desc: Floating alert
  - class: .prs-alert-warning
    type: modifier
    desc: Yellow variant
  - class: .prs-alert-danger
    type: modifier
    desc: Red variant
  - class: .prs-alert-ghost
    type: modifier
    desc: Ghost variant
  - class: .prs-alert-content
    type: part
    desc: For content container

alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **For best accessibility:**  
    Please use **role** and **aria-live** attributes depending on your use case.

controls:
  - name: variant
    type: radio
    label: Variant
    desc: Color variants.
    default: default
    options:
      - default
      - info
      - success
      - warning
      - danger
      - neutral

  - name: ghost
    type: toggle
    label: Ghost
    desc: Ghost-like styles.
    default: false

  - name: withIcon
    type: toggle
    label: With icon
    desc: Optional preceding icon.
    default: false

  - name: withClose
    type: toggle
    label: With close
    desc: Optional close gadget icon.
    default: false

preview: |
  <div class="w-96 max-w-xs">
    <div
      role="alert"
      class="prs-alert"
      :class="{
        'prs-alert-info': variant === 'info',
        'prs-alert-success': variant === 'success',
        'prs-alert-warning': variant === 'warning',
        'prs-alert-danger': variant === 'danger',
        'prs-alert-neutral': variant === 'neutral',
        'prs-alert-ghost': ghost,
      }"
    >
      <div x-show="withIcon" class="icon" aria-hidden="true" style="display: none">
        <iconify-icon :icon="variant === 'success'  ? 'mdi:check-circle-outline' :
          variant === 'warning' ? 'mdi:warning-outline' :
          variant === 'danger' ? 'mdi:cancel' :
          'mdi:information-outline'" noobserver></iconify-icon>
      </div>
      <div class="prs-alert-content"><span x-text="variant" class="capitalize"></span> message slot...</div>
      <button x-show="withClose" class="close" aria-label="Close" style="display: none">
        <iconify-icon icon="mdi:close" noobserver></iconify-icon>
      </button>
    </div>
  </div>

code:
  html: |
    <div class="prs-alert{variant}{ghost}" role="alert">{withIcon}
      <div class="prs-alert-content">Alert message</div>{withClose}
    </div>
  logic:
    variant: "this.variant === 'default' ? '' : ' prs-alert-'+ this.variant"
    withIcon: "this.withIcon ? '\\n  <span class=\"icon\" aria-hidden=\"true\"><svg></svg></span>' : ''"
    withClose: "this.withClose ? '\\n  <button class=\"close\" aria-label=\"Close\"><svg></svg></button>' : ''"
    ghost: "this.ghost ? ' prs-alert-ghost' : ''"
---