// 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") ?? "dark" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "lg" state playground_shadow = ctx.url.searchParams.get("pg_shadow") ?? "sm" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Dark alert!" state playground_description = ctx.url.searchParams.get("pg_description") ?? "You should check in on some of those fields below." state playground_items = ctx.url.searchParams.get("pg_items") ?? "[]" state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[]" state playground_showIcon = ctx.url.searchParams.get("pg_showIcon") ?? "false" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false" 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") ?? "true" seo { title = "Alert" description = "Theme-aware, responsive alert component." } view {
Base component

Alert

Theme-aware, responsive alert component.

21 props0 slots2 eventsTheme readyResponsive
Interactive playground

Configure Alert

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

Live preview
Component code
<Alert
  color="dark"
  variant="solid"
  radius="lg"
  title="Dark alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Component props21 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Solid colors

Dark solid alert

Live dark solid alert with accessible semantics and copyable component code.

01
Live preview
Component usage.wrn
<Alert
  color="dark"
  variant="solid"
  radius="lg"
  title="Dark alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Secondary solid alert

Live secondary solid alert with accessible semantics and copyable component code.

02
Live preview
Component usage.wrn
<Alert
  color="secondary"
  variant="solid"
  radius="lg"
  title="Secondary alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Info solid alert

Live info solid alert with accessible semantics and copyable component code.

03
Live preview
Component usage.wrn
<Alert
  variant="solid"
  radius="lg"
  title="Info alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Success solid alert

Live success solid alert with accessible semantics and copyable component code.

04
Live preview
Component usage.wrn
<Alert
  color="success"
  variant="solid"
  radius="lg"
  title="Success alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Danger solid alert

Live danger solid alert with accessible semantics and copyable component code.

05
Live preview
Component usage.wrn
<Alert
  color="danger"
  variant="solid"
  radius="lg"
  title="Danger alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Warning solid alert

Live warning solid alert with accessible semantics and copyable component code.

06
Live preview
Component usage.wrn
<Alert
  color="warning"
  variant="solid"
  radius="lg"
  title="Warning alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Solid colors

Light solid alert

Live light solid alert with accessible semantics and copyable component code.

07
Live preview
Component usage.wrn
<Alert
  color="light"
  variant="solid"
  radius="lg"
  title="Light alert!"
  description="You should check in on some of those fields below."
  items='[]'
  actions='[]'
  compact="true"
/>
Content

Soft color alert

Live soft color alert with accessible semantics and copyable component code.

08
Live preview
Component usage.wrn
<Alert
  title="A new software update is available."
  description="See what is new in version 3.0.7."
  items='[]'
  actions='[]'
  showIcon="true"
/>
Content

With supporting text

Live with supporting text with accessible semantics and copyable component code.

09
Live preview
Component usage.wrn
<Alert
  variant="accent"
  title="Successfully updated."
  description="You have successfully updated your email preferences."
  items='[]'
  actions='[]'
  showIcon="true"
/>
Content

With a list

Live with a list with accessible semantics and copyable component code.

010
Live preview
Component usage.wrn
<Alert
  title="A problem occurred while submitting your data."
  items='[
    {
      "label": "This username is already in use"
    },
    {
      "label": "Email field cannot be empty"
    },
    {
      "label": "Please enter a valid phone number"
    }
  ]'
  actions='[]'
  showIcon="true"
/>
Content

With actions

Live with actions with accessible semantics and copyable component code.

011
Live preview
Component usage.wrn
<Alert
  title="YouTube would like to send notifications"
  description="Notifications may include alerts, sounds, and icon badges. These can be configured in Settings."
  items='[]'
  actions='[
    {
      "label": "Don\'t allow",
      "href": "#deny"
    },
    {
      "label": "Allow",
      "href": "#allow"
    }
  ]'
  showIcon="true"
/>
Actions & states

Right-aligned link

Live right-aligned link with accessible semantics and copyable component code.

012
Live preview
Component usage.wrn
<Alert
  title="A new software update is available."
  description="See what is new in version 3.0.7."
  items='[]'
  actions='[]'
  showIcon="true"
  linkLabel="Details"
  linkHref="#details"
/>
Actions & states

Discovery notice

Live discovery notice with accessible semantics and copyable component code.

013
Live preview
Component usage.wrn
<Alert
  radius="xl"
  shadow="md"
  title="New version published"
  description="A new version of this page was published. Refresh to see the changes."
  items='[]'
  actions='[]'
  showIcon="true"
  linkLabel="Refresh"
  linkHref="#refresh"
/>
Actions & states

Bordered alert

Live bordered alert with accessible semantics and copyable component code.

014
Live preview
Component usage.wrn
<Alert
  variant="bordered"
  shadow="none"
  title="A new software update is available."
  description="See what is new in version 3.0.7."
  items='[]'
  actions='[]'
  showIcon="true"
/>
Actions & states

Dismissible alert

Live dismissible alert with accessible semantics and copyable component code.

015
Live preview
Component usage.wrn
<Alert
  title="Requires JavaScript"
  description="This page requires an optional plugin. You can skip this step if it is already installed."
  items='[]'
  actions='[]'
  showIcon="true"
  dismissible="true"
  actionLabel="Learn more"
  actionHref="#learn-more"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@dismissFires when the component emits the dismiss event.
@actionFires when the component's action is selected.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('dismiss', (event) => {
  console.log(event.detail)
})
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
itemsstring[]No
actionsstring[]No
showIconbooleanfalseNo
iconstring""No
dismissiblebooleanfalseNo
dismissLabelstring"Dismiss alert"No
rolestring"alert"No
livestring"polite"No
linkLabelstring""No
linkHrefstring""No
actionLabelstring""No
actionHrefstring""No
compactbooleanfalseNo
} }