@usevyre/react @usevyre/vue

Alert

Two components for communicating important information: Alert — an inline status banner, and AlertDialog — a blocking confirmation modal for destructive or critical actions.

Variants

Four semantic variants each with a matching icon. Click the ✕ buttons to dismiss. 

import { Alert } from "@usevyre/react";

{/* With title */}
<Alert variant="info" title="Info">
  Your export is being prepared. We'll notify you when it's ready.
</Alert>

<Alert variant="success" title="Saved!">
  Changes saved successfully.
</Alert>

<Alert variant="warning" title="Heads up">
  You're approaching your storage limit.
</Alert>

<Alert variant="danger" title="Error">
  Failed to connect to the server.
</Alert>

Without title

Omit title for a concise single-line alert. 

<Alert variant="info">
  Your session will expire in 5 minutes.
</Alert>

AlertDialog — confirmation modal

AlertDialog renders as a portal overlay with focus trap and Escape support. Always use it for destructive actions that cannot be undone. 

import { AlertDialog, Button } from "@usevyre/react";

const [open, setOpen] = useState(false);

<Button variant="danger" onClick={() => setOpen(true)}>Delete workspace</Button>

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Delete workspace?"
  description="This action cannot be undone."
  variant="danger"
  confirmLabel="Delete workspace"
  onConfirm={handleDelete}
  onCancel={() => console.log("cancelled")}
/>

AlertDialog variants

 
<AlertDialog variant="danger" title="Delete?" ... />
<AlertDialog variant="warning" title="Proceed?" ... />
<AlertDialog variant="info" title="Confirm?" ... />

Alert props

Props

Prop Type Default Description
variant "info" | "success" | "warning" | "danger" "info" Visual style and icon of the alert.
title string — Optional bold title above the description.
onClose / @close () => void — When provided, a dismiss ✕ button is rendered.
#icon slot slot — Override the default variant icon.
class / className string — Additional CSS class.

AlertDialog props

Props

Prop Type Default Description
open / v-model boolean — Controlled open state.
onOpenChange (open: boolean) => void — (React) Called on close.
title string — Dialog heading.
description string — Supporting body text below the title.
variant "danger" | "warning" | "info" "danger" Icon and confirm button color.
confirmLabel string "Confirm" Label for the confirm action button.
cancelLabel string "Cancel" Label for the cancel button.
onConfirm / @confirm () => void — Called when confirm button is clicked.
onCancel / @cancel () => void — Called when cancel/Escape/backdrop is triggered.
← Accordion Avatar →