Alert Showcase

Alert

Delightfully polished alerts for high-signal messaging. PyraUI ships crisp visuals, badges, call-to-actions, and micro-interactions so your feedback moments feel intentional and premium.

Quick Alerts

Real-world, unobtrusive notifications optimised for status and inline messaging.

Compact by default

Information

Analytics will refresh every 5 minutes while the rollout completes.

Saved

Workspace permissions were updated successfully.

Action required

Add a secondary email before Friday to keep notifications enabled.

Payment failed

We couldn’t process the last invoice. Retry within 24 hours to avoid suspension.


<.alert variant={:success} title="Saved" message="Preferences updated" />
<.alert variant={:warning} dismissible title="Heads up" message="Verify your billing email" />

Enhanced Experiences

Layer badges, richer copy, and inline CTAs when an alert should guide the next step.

Motion aware

Heads up

System maintenance scheduled

We’ll apply performance upgrades this Saturday at 02:00 UTC. You’ll receive a follow-up when everything is live.

Launch

Milestone unlocked

The adoption squad will host a live AMA tomorrow so your teams can explore workflows in real time.

Review

Billing attention needed

The payment method ending in 6728 requires verification. Update details within the next 48 hours to prevent service interruption.

Critical

Incident response active

API latency is elevated for the EU region. Our reliability team is already applying mitigations.

Celebration

4.9 satisfaction this quarter

Digest

This week’s highlights

• 3 new integrations joined the marketplace
• Team velocity improved by 12%
• 2 accessibility upgrades shipped in Designer

Note

Remember to rotate secrets

Rotate environment secrets every 30 days to align with the security playbook.


<.alert
  variant={:celebrate}
  badge="Celebration"
  title="Product adoption is soaring"
>
  <p>Activations grew 34% this sprint. Give the GTM team a high five!</p>
  <:actions>
    <.button variant={:ghost} size={:sm}>Share announcement</.button>
  </:actions>
</.alert>

Dismissible + Actions

Alerts love progressive disclosure. Combine dismissal, custom copy, and inline CTAs for effortless follow-up.

Auto-update

Version 1.18 is ready

Restart before 09:00 to ensure production nodes receive the latest runtime patches and observability tweaks.


<.alert variant={:info} badge="Update" title="New release" dismissible>
  <p>Your workspace can opt-in to the latest features right away.</p>
  <:actions>
    <.button variant={:primary} size={:sm}>Enable now</.button>
    <.button variant={:ghost} size={:sm}>Later</.button>
  </:actions>
</.alert>

Props

Configure alerts with a small, expressive API. Defaults are optimised for accessibility, motion polish, and theming.

Prop	Type	Default	Description
variant	atom	:info	Choose the tone. Supports :info, :success, :warning, :danger, :celebrate, :neutral, :note.
title	string \| nil	nil	Optional heading that anchors the message hierarchy.
message	string \| nil	nil	Plain string message. Compose markup inside the component for richer content.
badge	string \| nil	nil	Adds a high-contrast capsule label (e.g. “Launch”, “Critical”).
icon	string \| nil	auto	Override the hero icon. Defaults to a tone-aware icon.
dismissible	boolean	false	Allow users to close the alert once acknowledged.
class	string	""	Append classes to the outer container for bespoke layout tuning.
slots	actions	—	Use the `:actions` slot for inline call-to-actions.