base component

Alert

Theme-aware, responsive alert component.

@wrnexus/ui 0.5.021 props0 slots2 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Alert
  size="default"
  color="info"
  variant="soft"
  radius="md"
  shadow="sm"
/>

Legacy mount name: data-component="Alert".

Props and attributes

Prop	Type	Requirement	Default
`size`	`string`	Optional	`"default"`
`color`	`string`	Optional	`"info"`
`variant`	`string`	Optional	`"soft"`
`class`	`string`	Optional	`""`
`radius`	`string`	Optional	`"md"`
`shadow`	`string`	Optional	`"sm"`
`title`	`string`	Optional	`"Alert"`
`description`	`string`	Optional	`""`
`items`	`string`	Optional	`[]`
`actions`	`string`	Optional	`[]`
`showIcon`	`boolean`	Optional	`false`
`icon`	`string`	Optional	`""`
`dismissible`	`boolean`	Optional	`false`
`dismissLabel`	`string`	Optional	`"Dismiss alert"`
`role`	`string`	Optional	`"alert"`
`live`	`string`	Optional	`"polite"`
`linkLabel`	`string`	Optional	`""`
`linkHref`	`string`	Optional	`""`
`actionLabel`	`string`	Optional	`""`
`actionHref`	`string`	Optional	`""`
`compact`	`boolean`	Optional	`false`

Slots

This component does not declare a slot.

Events

dismiss
action

Source contract

Installed source: components/alert.wrn

component Alert {
  props {
    size = "default"
    color = "info"
    variant = "soft"
    class = ""
    radius = "md"
    shadow = "sm"

    title = "Alert"
    description = ""
    items = []
    actions = []

    showIcon = false
    icon = ""
    dismissible = false
    dismissLabel = "Dismiss alert"
    role = "alert"
    live = "polite"

    linkLabel = ""
    linkHref = ""
    actionLabel = ""
    actionHref = ""
    compact = false

    @event dismiss = function
    @event action = function
  }

  state visible = true

  functions {
    function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
      root = sourceEvent.currentTarget.closest("[data-wrn-alert]")

      if (!root) {
        return
      }

      customEvent = document.createEvent("CustomEvent")
      customEvent.initCustomEvent(eventName, true, false, {
        component: "Alert",
        title: title,
        color: color,
        variant: variant,
        action: action
      })
      root.dispatchEvent(customEvent)
    }

    function dismissAlert(sourceEvent) {
      visible = false
      dispatchAlertEvent(sourceEvent, "dismiss", null)
    }

    function selectAction(sourceEvent, action) {
      dispatchAlertEvent(sourceEvent, "action", action)
    }
  }

  view {
        <section
      {...attrs}
      data-wrn-alert
      data-color="{color}"
      data-variant="{variant}"
      data-radius="{radius}"
      data-shadow="{shadow}"
      data-show="visible"
      aria-hidden="{visible ? 'false' : 'true'}"
      role="{role}"
      aria-live="{live}"
      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert wire-next--alert-{variant} {compact ? 'wire-next--alert-compact' : ''} {class}"
    >
      {#if showIcon}
        <span class="wire-next__alert-icon" aria-hidden="true">
          {#if icon}
            <span class="{icon}">
        </span>
          {:else if color === "success"}
            <span class="icon-[lucide--circle-check]">
        </span>
          {:else if color === "danger"}
            <span class="icon-[lucide--circle-x]">
        </span>
          {:else if color === "warning"}
            <span class="icon-[lucide--triangle-alert]">
        </span>
          {:else}
            <span class="icon-[lucide--info]">
        </span>
          {/if}
        </span>
      {/if}

      <div class="wire-next__alert-body">
        {#if title}<strong class="wire-next__alert-title">{title}</strong>{/if}
        {#if description}<p>{description}</p>{/if}

        {#if items.length > 0}
          <ul>
            {#each items as item}<li>{item.label || item}</li>{/each}
          </ul>
        {/if}

        {#if actions.length > 0 || actionLabel || linkLabel}
          <div class="wire-next__alert-actions">
            {#each actions as item}
              <a
                href="{item.href || '#'}"
                data-variant="{item.variant || 'link'}"
                @click="selectAction(event, item)"
              >{item.label}</a>
            {/each}
            {#if actionLabel}
              <a
                href="{actionHref || '#'}"
                data-variant="action"
                @click="selectAction(event, { label: actionLabel, href: actionHref })"
              >{actionLabel}</a>
            {/if}
            {#if linkLabel}
              <a
                href="{linkHref || '#'}"
                data-variant="link"
                @click="selectAction(event, { label: linkLabel, href: linkHref })"
              >{linkLabel}</a>
            {/if}
          </div>
        {/if}
      </div>

      {#if dismissible}
        <button
          type="button"
          class="wire-next__alert-dismiss"
          aria-label="{dismissLabel}"
          @click="dismissAlert(event)"
        >
        <span class="icon-[lucide--x]" aria-hidden="true">
        </span>
        </button>
      {/if}
    </section>
    }
}