Pepulux Playbook

Alert

Status message strip for success, warning, error, and informational states. Two variants: floating card or full-width banner.

import{ Alert } from "@pepulux/ui"

Colors

Saved!

Your changes have been saved.

Heads up

Your trial ends in 3 days.

Error

Something went wrong. Please try again.

New feature

Dark mode is now available in settings.

Full-width variant

Payment confirmedReceipt sent to your email.

With actions

Upgrade required

You've reached your plan limit.

Props

PropTypeDefaultDescription
color"default" | "gray" | "error" | "warning" | "success" | "brand""default"Alert color variant
variant"floating" | "full-width""floating"Layout variant
title*string—Bold heading text
supportingTextReactNode—Supporting description
primaryActionAlertAction—Primary action button { label, onClick }
secondaryActionAlertAction—Secondary action { label, onClick }
onDismiss() => void—Shows × close button when provided
Application component → Alerts & notificationswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Pick the right level of interruption

Use an alert for messages that belong to the page, and a notification for transient, event-driven feedback. Colour communicates severity: success, warning, error and brand for neutral news.

Give the person a next step. A message that only states a problem is less useful than one that offers an action.

Do

  • Keep titles to one line
  • Offer a clear action when something can be fixed

Don't

  • Stack more than two alerts on a page

Announce changes accessibly

Alerts that appear after a user action should be announced to assistive technology (role="alert" for errors, role="status" for confirmations). Never rely on colour alone — keep the icon and the text.