// Generated by scripts/generate-showcase.mjs. Do not edit directly. page AlertDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "success" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "md" state playground_shadow = ctx.url.searchParams.get("pg_shadow") ?? "none" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Changes saved" state playground_description = ctx.url.searchParams.get("pg_description") ?? "Your workspace settings are up to date." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[]") state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[]") state playground_showIcon = (ctx.url.searchParams.get("pg_showIcon") ?? "true") === "true" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "icon-[lucide--circle-check]" state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true" state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Dismiss alert" state playground_role = ctx.url.searchParams.get("pg_role") ?? "alert" state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite" state playground_linkLabel = ctx.url.searchParams.get("pg_linkLabel") ?? "" state playground_linkHref = ctx.url.searchParams.get("pg_linkHref") ?? "" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "" state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "" state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true" seo { title = "Alert" description = "Theme-aware, responsive alert component." } view {
Base component

Alert

Theme-aware, responsive alert component.

21 props0 slots2 outputsTheme readyResponsive
Interactive playground

Configure Alert

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
page AlertExample {
  state items = []
  state actions = []
  view {
    <Alert
      color="success"
      shadow="none"
      title="Changes saved"
      description="Your workspace settings are up to date."
      items="{items}"
      actions="{actions}"
      showIcon="true"
      icon="icon-[lucide--circle-check]"
      dismissible="true"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props21 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Success message

A concise confirmation that can be dismissed.

01
Live preview
Component usage.wrn
page AlertExample {
  state items = []
  state actions = []
  view {
    <Alert
      color="success"
      shadow="none"
      title="Changes saved"
      description="Your workspace settings are up to date."
      items="{items}"
      actions="{actions}"
      showIcon="true"
      icon="icon-[lucide--circle-check]"
      dismissible="true"
    />
  }
}
Compact

Informational notice

One useful message without unnecessary actions.

02
Live preview
Component usage.wrn
page AlertExample {
  state items = []
  state actions = []
  view {
    <Alert
      shadow="none"
      title="Scheduled maintenance"
      description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC."
      items="{items}"
      actions="{actions}"
      showIcon="true"
      icon="icon-[lucide--info]"
      dismissible="true"
    />
  }
}
Advanced

Action required

A warning with one relevant next step.

03
Live preview
Component usage.wrn
page AlertExample {
  state items = []
  state actions = []
  view {
    <Alert
      color="warning"
      shadow="none"
      title="Payment needs attention"
      description="Update your payment method to keep your subscription active."
      items="{items}"
      actions="{actions}"
      showIcon="true"
      icon="icon-[lucide--triangle-alert]"
      dismissible="true"
      actionLabel="Update payment"
      actionHref="#payment"
    />
  }
}
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@dismissFires after the announcement or feedback surface is dismissed.
@actionFires when the component's primary or item action is activated.
Declarative handlers.wrn
<Alert
  @dismiss='console.log(payload)'
  @action='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Alert\"], [data-component=\"Alert\"]")

if (component) registerOutputHandler(component, "dismiss", (payload) => {
  console.log("dismiss", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"info"No
variantstring"soft"No
classstring""No
radiusstring"md"No
shadowstring"sm"No
titlestring"Alert"No
descriptionstring""No
itemsunknown[][]No
actionsunknown[][]No
showIconbooleanfalseNo
iconstring""No
dismissiblebooleanfalseNo
dismissLabelstring"Dismiss alert"No
rolestring"alert"No
livestring"polite"No
linkLabelstring""No
linkHrefstring""No
actionLabelstring""No
actionHrefstring""No
compactbooleanfalseNo
} }