Alert — Zyna UI

All Variants

Uplink Established

Secure transmission confirmed. All nodes synchronized.

System Breach

Unauthorized access detected. Isolating affected modules.

Irreversible

This action cannot be undone. Confirm before proceeding.

Signal Received

New transmission available. Protocol v2.1 inbound.

Standby

No active events. System is idle and awaiting instructions.

Classified

Access restricted. Clearance level insufficient for this record.

<div class="alert alert-success" role="alert">
  <div>
    <p class="alert-title">Uplink Established</p>
    <p>Secure transmission confirmed. All nodes synchronized.</p>
  </div>
</div>

<div class="alert alert-danger" role="alert">
  <div>
    <p class="alert-title">System Breach</p>
    <p>Unauthorized access detected. Isolating affected modules.</p>
  </div>
</div>

<div class="alert alert-warning" role="alert">
  <div>
    <p class="alert-title">Irreversible</p>
    <p>This action cannot be undone. Confirm before proceeding.</p>
  </div>
</div>

<div class="alert alert-info" role="alert">
  <div>
    <p class="alert-title">Signal Received</p>
    <p>New transmission available. Protocol v2.1 inbound.</p>
  </div>
</div>

<div class="alert alert-neutral" role="alert">
  <div>
    <p class="alert-title">Standby</p>
    <p>No active events. System is idle and awaiting instructions.</p>
  </div>
</div>

<div class="alert alert-dark" role="alert">
  <div>
    <p class="alert-title">Classified</p>
    <p>Access restricted. Clearance level insufficient for this record.</p>
  </div>
</div>

With Icons

Add an .alert-icon element as the first child to include an SVG icon alongside the message.

Uplink Established

Secure channel confirmed. All nodes synchronized.

System Breach

Unauthorized access detected. Isolating affected modules.

Signal Received

New transmission available. Protocol v2.1 inbound.

<div class="alert alert-success" role="alert">
  <svg class="alert-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
  <div>
    <p class="alert-title">Uplink Established</p>
    <p>Secure channel confirmed. All nodes synchronized.</p>
  </div>
</div>

<div class="alert alert-danger" role="alert">
  <svg class="alert-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <circle cx="12" cy="12" r="10"/>
    <line x1="15" y1="9" x2="9" y2="15"/>
    <line x1="9" y1="9" x2="15" y2="15"/>
  </svg>
  <div>
    <p class="alert-title">System Breach</p>
    <p>Unauthorized access detected. Isolating affected modules.</p>
  </div>
</div>

<div class="alert alert-info" role="alert">
  <svg class="alert-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
    <circle cx="12" cy="12" r="10"/>
    <line x1="12" y1="8" x2="12" y2="12"/>
    <line x1="12" y1="16" x2="12.01" y2="16"/>
  </svg>
  <div>
    <p class="alert-title">Signal Received</p>
    <p>New transmission available. Protocol v2.1 inbound.</p>
  </div>
</div>

Shapes

Square

Zero border-radius variant.

Round

Full-radius with inset ring border.

<!-- Square — zero border-radius -->
<div class="alert alert-success alert-square" role="alert">
  <div class="alert-title">Square</div>
  Zero border-radius variant.
</div>

<!-- Round — full radius, inset ring replaces left bar -->
<div class="alert alert-info alert-round" role="alert">
  <div class="alert-title">Round</div>
  Full-radius with inset ring border.
</div>

Sizes

Small

Compact alert for inline notices and tight layouts.

Default

Standard alert size for general use.

Large

Prominent alert for critical messages that demand attention.

<!-- Small -->
<div class="alert alert-info alert-sm" role="alert">
  <div>
    <p class="alert-title">Small</p>
    <p>Compact alert for inline notices and tight layouts.</p>
  </div>
</div>

<!-- Default -->
<div class="alert alert-info" role="alert">
  <div>
    <p class="alert-title">Default</p>
    <p>Standard alert size for general use.</p>
  </div>
</div>

<!-- Large -->
<div class="alert alert-info alert-lg" role="alert">
  <div>
    <p class="alert-title">Large</p>
    <p>Prominent alert for critical messages that demand attention.</p>
  </div>
</div>

CSS Variable API

Variable	Default	Description
--alert-bar-color	rgba(255,255,255,0.10)	Left luminescent bar colour
--alert-bg	rgba(255,255,255,0.02)	Background tint
--alert-color	rgba(240,235,224,0.65)	Text colour (≥4.5:1 WCAG AA)
--alert-shadow	none	box-shadow — near glow + inset depth
--alert-title-shadow	none	.alert-title text-shadow luminescence

Custom Variant

Five variables to override. The plasma example creates a purple notification.

Plasma Signal

Quantum channel established. Reality distortion nominal.

.alert-plasma {
  --alert-bar-color:    #BF5FFF;
  --alert-bg:           rgba(139, 0, 255, 0.055);
  --alert-color:        rgba(191, 95, 255, 0.88);
  --alert-shadow:       0 0 30px rgba(139,0,255,0.08),
                        inset 4px 0 18px rgba(139,0,255,0.05);
  --alert-title-shadow: 0 0 12px rgba(191,95,255,0.65);
}

When to Use

Use alerts to communicate system feedback, status changes, or important notices that the user needs to see in context. They should be temporary, contextual, and relevant.

✓ Do

Match the variant to the semantic meaning (success, danger, warning, info)
Use .alert-icon to improve scan speed in busy layouts
Keep the message short: a title and one supporting sentence
Place alerts close to the action that triggered them
Use .alert-neutral or .alert-dark for ambient, non-urgent notices

✗ Don't

Don't stack multiple alerts of the same variant
Don't use alerts for purely decorative section dividers
Don't write long paragraphs inside an alert. Link to a detail page instead.
Don't use color alone as the only differentiator. Always include a title.
Don't show an alert for an action the user didn't trigger

Accessibility

Choose the ARIA live region role based on urgency. Both roles are invisible to sighted users — the difference is how screen readers announce the message.

Role	Live behaviour	Use for	ZynaUI variants
role="alert"	Assertive — interrupts the current AT announcement immediately	Errors and warnings that require the user's immediate attention	`.alert-danger` `.alert-warning`
role="status"	Polite — waits for AT to finish before announcing	Non-urgent confirmations and ambient notices	`.alert-success` `.alert-info` `.alert-neutral` `.alert-dark`

<!-- Urgent: interrupts screen reader immediately -->
<div class="alert alert-danger" role="alert">
  <div><p class="alert-title">Connection lost</p><p>Unable to reach the upstream service.</p></div>
</div>

<!-- Non-urgent: waits for screen reader to finish current announcement -->
<div class="alert alert-success" role="status">
  <div><p class="alert-title">Deployment complete</p><p>Build deployed successfully to production.</p></div>
</div>

Alerts present in the DOM at page load are not announced by screen readers regardless of role — both roles only trigger when content is injected dynamically after load.