Component

Alert

A high-signal message block for status, warnings, confirmations, and contextual product feedback.

Examples

Live previews paired with copyable source.

Intent Alerts

Use clear intent colors with a strong left rail and compact icon well.

Sync available

A newer version of your design tokens is ready to pull.

Published

Your component registry is live and available to install.

Review required

Some props changed and may need a migration note.

Build failed

Type generation stopped because one component export is missing.

tsx

<Alert variant="info" title="Sync available" description="A newer version is ready." />
<Alert variant="success" title="Published" description="Your registry is live." />
<Alert variant="warning" title="Review required" description="Some props changed." />
<Alert variant="danger" title="Build failed" description="Type generation stopped." />

With Action

Attach one focused action without turning the alert into a busy card.

Component update

Badge and Alert now support the refreshed PacmanUI visual system.

tsx

<Alert
  variant="info"
  title="Component update"
  description="Badge and Alert now support the refreshed visual system."
  action={<Button size="sm" variant="secondary">View</Button>}
/>

API Reference

Props available on the component.

Prop	Type	Default	Description
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'danger'	'default'	Controls the alert intent and accent rail.
title	string	undefined	Short alert headline.
description	string	undefined	Supporting alert copy.
icon	React.ReactNode	variant icon	Optional custom icon.
action	React.ReactNode	undefined	Optional trailing action.

Install

bash

pnpm dlx pacmanui add alert
npx pacmanui add alert

Basic Usage

tsx

import { Alert } from '@/components/pacmanui/alert'

export default function Example() {
  return <Alert variant="info" title="Heads up" description="Your registry has updates." />
}