Alert
Alert component for displaying important tips or feedback information to users. Features multiple built-in state modes, innovative glassmorphism visual effects, and ultra-smooth marquee announcement functionality.
Display Modes
Alert supports multiple semantic states and visual themes.
Configurable Interactions
The component is not closable by default. You can enable it via the closable prop. It also supports showing status icons and their positions.
Text Scrolling (Scrollable)
For lengthy announcement content, enable the scrollable prop to achieve a marquee scrolling effect. We use will-change: transform and translate3d hardware acceleration to optimize scrolling smoothness to the extreme.
[Fast Mode] The system has detected high environmental pressure. Please optimize your code performance!
[Fast Mode] The system has detected high environmental pressure. Please optimize your code performance!
This is an auto-scrolling notification: Welcome to the YH-UI enhanced Alert component, which supports marquee effects, hover pause, and dynamic speed configuration. Try hovering your mouse over it!
This is an auto-scrolling notification: Welcome to the YH-UI enhanced Alert component, which supports marquee effects, hover pause, and dynamic speed configuration. Try hovering your mouse over it!
Auto Close & Timer (Advanced)
YhAlert supports timed closing. When show-progress is enabled, a dynamic countdown progress bar appears at the bottom.
This alert will automatically close after 5 seconds, with a countdown progress bar.
Advanced Features
1. Smart Glassmorphism
Enable via effect="glass". The component will automatically apply backdrop blur and semi-transparent overlays, perfect for modern dashboards with strong visual backgrounds.
This is YH-UI's premium glassmorphism theme, perfect for showcasing on backgrounds with strong visual design.
2. Polymorphic Action Slot
Supports the action slot. You can place interactive buttons like "Retry" or "View Details" inside the alert bar, transforming alerts from one-way notifications into two-way interactions.
Use in Nuxt
YhAlert is fully adapted for Nuxt 3/4. The component supports automatic import, and all animation strategies are optimized for SSR environments.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| title | Title | string | — |
| description | Description | string | — |
| type | Type | 'success' | 'info' | 'warning' | 'error' | 'info' |
| effect | Theme | 'light' | 'dark' | 'outline' | 'glass' | 'light' |
| closable | Whether closable | boolean | false |
| close-text | Custom text for the close button | string | — |
| close-icon | Icon for the close button | string | Component | — |
| show-icon | Whether to show the icon | boolean | false |
| center | Whether to center the content | boolean | false |
| scrollable | Whether to enable marquee scrolling | boolean | false |
| scroll-speed | Seconds to complete one scroll cycle | number | 15 |
| pause-on-hover | Whether to pause scrolling on hover | boolean | true |
| duration | Auto-dismiss duration in milliseconds, 0 means never | number | 0 |
| show-progress | Whether to show auto-close progress bar | boolean | false |
Slots
| Slot Name | Description |
|---|---|
| default | Description content |
| title | Title content |
| icon | Custom icon |
| close | Custom close trigger |
| action | Custom action area (below description) |
Events
| Event Name | Description | Parameters |
|---|---|---|
| close | Triggered when closed | (evt: MouseEvent) |
Theme Variables
You can deeply customize Alert's visual style through the following CSS variables.
| Variable | Description | Default |
|---|---|---|
--yh-alert-padding | Padding | 12px 16px |
--yh-alert-border-radius | Border radius | 12px |
--yh-alert-title-font-size | Title font size | 14px |
--yh-alert-description-font-size | Description font size | 13px |
--yh-alert-icon-size | Icon size | 20px |
--yh-alert-scroll-speed | Scroll speed control (S) | 15s |