Alert

A notification banner with four semantic color variants, an automatic icon, an optional title, and an optional dismiss button. Rendered with role="alert" for screen readers.

Import

tsx

import { Alert } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Your session will expire in 5 minutes.

Payment confirmed

Your order has been placed and will ship within 2 business days.

Review your details before submitting the form.

Error

Failed to save changes. Please try again.

Props

Prop	Type	Default	Description
variant	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Color scheme and icon of the alert.
title	`string`	—	Bold title line rendered above the body.
icon	`ReactNode`	—	Overrides the default icon. Pass null to hide.
onClose	`() => void`	—	When provided, renders a dismiss button.
children	`ReactNode`	—	Alert body content.

Examples

Variants

tsx

import { Alert } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Alert variant="info">Your session will expire in 5 minutes.</Alert>
      <Alert variant="success" title="Payment confirmed">Your order has been placed.</Alert>
      <Alert variant="warning">Review your details before submitting.</Alert>
      <Alert variant="danger" title="Error">Failed to save changes. Please try again.</Alert>
    </div>
  )
}

Dismissible

tsx

import { useState } from 'react'
import { Alert } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  const [visible, setVisible] = useState(true)
  if (!visible) return null
  return (
    <Alert variant="info" onClose={() => setVisible(false)}>
      Click the X to dismiss this alert.
    </Alert>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */