Destructive Alert

error x icon

Red destructive alert with warning icon. From Bundui.

alerterrordestructivebundui

⚠️ Something went wrong. Please try again.

Code

alert-destructive.tsx

export function DestructiveAlert({ message = "Something went wrong. Please try again." }: { message?: string }) {
  return (
    <div role="alert" className="flex items-center gap-3 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-300">
      <span aria-hidden>⚠️</span>
      <span>{message}</span>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Destructive Alert component and wire it to my accent.”