VeloxUI

English

O'zbekcha
Русский

English

O'zbekcha
Русский

Appearance

Alert ​

Displays important messages and notifications. Supports success, warning, danger, info types with soft, solid, outline, and accent variants. Features auto-close with progress, collapsible content, loading state, custom colors, marquee text, and alert stacking.

Basic ​

vue
<VxAlert title="Info — This is an informational alert." type="info" />
<VxAlert title="Success — Your changes have been saved." type="success" />
<VxAlert title="Warning — Please review before continuing." type="warning" />
<VxAlert title="Danger — Something went wrong." type="danger" />

With Description ​

vue
<VxAlert
  type="success"
  title="Deployment complete"
  description="Your application has been successfully deployed to production."
/>

Closable ​

vue
<VxAlert type="info" title="You can dismiss this alert." closable />

Solid Variant ​

vue
<VxAlert type="info" variant="solid" title="New version available." />
<VxAlert type="success" variant="solid" title="All systems operational." />
<VxAlert type="warning" variant="solid" title="API rate limit approaching." />
<VxAlert type="danger" variant="solid" title="Service outage detected." />

Outline Variant ​

vue
<VxAlert type="info" variant="outline" title="Tip — Use keyboard shortcuts." />
<VxAlert type="success" variant="outline" title="Verified — Email confirmed." />

Accent Variant ​

Left colored border strip — great for callouts and side notes.

vue
<VxAlert type="info" variant="accent" title="Note"
  description="This feature is currently in beta." />
<VxAlert type="danger" variant="accent" title="Important"
  description="Deleting your account is permanent." />

Auto-close with Progress Bar ​

Set duration (in ms) to auto-dismiss. Hover pauses the timer.

vue
<VxAlert
  type="success"
  title="Saved! This alert will close in 8 seconds."
  :duration="8000"
  closable
/>

Collapsible ​

Click the title to expand or collapse the description.

vue
<VxAlert
  type="info"
  title="Release notes v2.4.0"
  description="New features include dark mode support, improved performance..."
  collapsible
/>

Loading State ​

Replaces the icon with a spinner to indicate a pending operation.

vue
<VxAlert type="info" title="Uploading files..."
  description="3 of 5 files uploaded." loading />

Custom Color ​

Use the color prop to apply any custom color, regardless of type.

vue
<VxAlert title="Custom purple alert" color="#8b5cf6" />
<VxAlert title="Custom teal solid" variant="solid" color="#14b8a6" />
<VxAlert title="Custom pink outline" variant="outline" color="#ec4899" />
<VxAlert title="Custom orange accent" variant="accent" color="#f97316" />

Marquee (Scrolling Text) ​

Scrolling text for banner announcements. Use marquee-speed to control speed (default 50).

vue
<VxAlert
  type="warning"
  variant="solid"
  banner
  marquee
  title="Limited time offer — 50% off all annual plans!"
/>

Alert Group (Stacking) ​

VxAlertGroup animates alert enter/leave transitions. Add and remove alerts dynamically.

vue
<script setup>
import { ref } from 'vue'
import { VxAlert, VxAlertGroup, VxButton } from 'veloxui'

const alerts = ref([
  { id: 1, type: 'info', title: 'Notification', desc: 'You have a new message.' },
  { id: 2, type: 'success', title: 'Saved', desc: 'Changes saved.' },
])

function removeAlert(id) {
  alerts.value = alerts.value.filter(a => a.id !== id)
}
</script>

<template>
  <VxAlertGroup>
    <VxAlert
      v-for="a in alerts"
      :key="a.id"
      :type="a.type"
      :title="a.title"
      :description="a.desc"
      closable
      @close="removeAlert(a.id)"
    />
  </VxAlertGroup>
</template>

Without Icon ​

vue
<VxAlert type="info" title="No icon alert." :show-icon="false" />

Centered ​

vue
<VxAlert type="info" title="Centered alert content." center />
vue
<VxAlert type="warning" variant="solid" title="Maintenance tonight." banner closable center />

With Action Slot ​

vue
<VxAlert type="info" title="A new software update is available.">
  <template #action>
    <VxButton size="sm" variant="outline">Update now</VxButton>
  </template>
</VxAlert>

API ​

VxAlert Props ​

PropTypeDefaultDescription
type'default' | 'success' | 'warning' | 'danger' | 'info''info'Alert type
variant'soft' | 'solid' | 'outline' | 'accent''soft'Visual style
titlestring—Alert title text
descriptionstring—Alert description text
closablebooleanfalseShow close button
show-iconbooleantrueShow type icon
iconstring | Component—Custom icon (overrides default)
bannerbooleanfalseFull-width banner mode
centerbooleanfalseCenter the content
durationnumber0Auto-close after N ms (0 = disabled). Shows progress bar.
collapsiblebooleanfalseExpandable/collapsible description
loadingbooleanfalseShow spinner instead of icon
colorstring—Custom color (overrides type color)
marqueebooleanfalseScrolling text animation
marquee-speednumber50Marquee scroll speed (higher = faster)

VxAlertGroup Props ​

PropTypeDefaultDescription
max-countnumber0Max visible alerts (0 = unlimited)

Slots ​

SlotDescription
defaultAdditional content below title
iconCustom icon content
titleCustom title content
descriptionCustom description content
actionAction area (right side)

Events ​

EventPayloadDescription
close—Emitted when close button clicked or auto-close triggers
after-close—Emitted after the fade-out transition completes