Alert

Patterns

Inline Feedback Message

When to use:

• A local flow needs short visible feedback.

Composition notes:

• Keep the message concise.
• Use title only when extra hierarchy helps.

Trade-offs:

• Strong semantic feedback.
• Weak fit for long explanations.

import { FormEvent, useState } from 'react';
import {
  Alert,
  AlertContent,
  AlertIcon,
  AlertMain,
  AlertTitle,
  Button,
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndicator,
  CheckboxInput,

Settings Warning

When to use:

• A settings page or panel needs one visible caution or prerequisite.

Composition notes:

• Keep the alert near the setting it affects.
• Do not let the warning become the only place where the setting is explained.

Trade-offs:

• Good local visibility.
• Can create noise if every section has multiple alerts.

import { useState } from 'react';
import { Alert, AlertContent, AlertIcon, AlertMain, AlertTitle, Button, Text } from '@vega-ui/react';

const record = 'vega-site-verification=8c1f0b6e2d9a4f7b93e5c2a1d0f4e6b8a7c3d9e1f2b4a6c8d0e2f4a6b8c0d2e4';

export default function DomainVerification() {
  const [message, setMessage] = useState('');

  const copy = async () => {
    await navigator.clipboard.writeText(record);
    setMessage('Copied to clipboard.');
  };

Dismissible Feedback

When to use:

• The alert may be removed after acknowledgment.

Composition notes:

• Consumer state should own dismissal.
• Keep the dismiss action secondary to the message itself.

Trade-offs:

• Useful for temporary feedback.
• Easy to overuse if important alerts can disappear too soon.

import { useRef, useState } from 'react';
import type { CSSProperties } from 'react';
import { Alert, AlertContent, AlertIcon, AlertMain, AlertTitle, Button, Heading, Icon, IconButton } from '@vega-ui/react';
import { XIcon } from '@vega-ui/icons';

export default function Dismissible() {
  const [visible, setVisible] = useState(true);
  const headingRef = useRef<HTMLHeadingElement>(null);

  const dismiss = () => {
    setVisible(false);
    headingRef.current?.focus();

Comparison

Quick Decision Rule

Use Alert for short semantic feedback messages.

Alert vs Badge

Use Alert when:

• the UI needs a short message with hierarchy

Use Badge when:

• the UI only needs a tiny status label

Main trade-off: alert is a message pattern, while badge is compact metadata.

Alert vs Card

Use Alert when:

• the content is feedback or status

Use Card when:

• the content is grouped layout or summary content

Main trade-off: alert is feedback-oriented, while card is a container surface.

Alert vs Link

Use Alert when:

• the UI is communicating status or feedback

Use Link when:

• the text is meant to navigate rather than explain status

Choose This Component When

• The UI needs short semantic feedback.
• Severity or message meaning matters.
• The content benefits from optional icon and title hierarchy.
• the message should remain content, not become a workflow container

Do Not Choose This Component When

• The content is only a tiny label.
• The UI needs a grouped layout surface.
• The message grows into a larger workflow.

Troubleshooting

Alert Feels Too Large For The Message

Symptom

The content is so short that the alert feels visually heavy.

Likely Cause

Alert is being used where a smaller Badge or inline text hint would be enough.

How To Verify

• Check whether the content is only a tiny status label.

Fix

• Switch to Badge or simpler inline text where appropriate.

Alert Is Doing Layout Work Instead Of Feedback Work

Symptom

The component starts to behave like a persistent content block instead of a feedback message.

Likely Cause

Alert was chosen for grouped layout rather than status or feedback.

How To Verify

• Remove the semantic message framing and inspect whether the surface is really just container layout.

Fix

• Switch to Card for grouped content surfaces.
• Keep Alert for short semantic feedback.