Alert
YhAlert is used to display important notices and feedback. It supports semantic states, scrolling announcements, auto close, and a custom action area.
Basic States
Use type to switch between success, info, warning, and error states.
Close and Icons
The component is not closable by default. Enable closable to show the close button, and show-icon to display the status icon.
Scrolling Announcement
Enable scrollable for long notice content, then adjust behavior with scroll-speed and pause-on-hover.
[Fast Notice] The current environment is under heavy load. Please optimize rendering performance.
[Fast Notice] The current environment is under heavy load. Please optimize rendering performance.
This notice scrolls automatically. It supports a marquee effect, hover pause, and configurable speed.
This notice scrolls automatically. It supports a marquee effect, hover pause, and configurable speed.
Auto Close
Set duration to close the alert automatically. When show-progress is enabled, a progress bar is rendered at the bottom.
This alert closes automatically after 5 seconds and shows a countdown progress bar.
Theme Effect
effect supports light, dark, outline, and glass.
Useful when the alert needs stronger visual layering with blur and translucent background.
Use in Nuxt
After installing @yh-ui/nuxt, YhAlert can be used directly in pages. Its initial render does not rely on browser-only APIs, so static content renders correctly during SSR, while auto close and hover pause start on the client after hydration.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
title | Title text | string | '' |
description | Description text | string | '' |
type | Alert type | 'success' | 'info' | 'warning' | 'error' | 'info' |
effect | Visual style | 'light' | 'dark' | 'outline' | 'glass' | 'light' |
closable | Whether to show the close button | boolean | false |
close-text | Custom close button text | string | '' |
close-icon | Custom close icon component or icon name | string | Component | '' |
show-icon | Whether to show the status icon | boolean | false |
icon | Custom status icon component or icon name | string | Component | '' |
center | Whether the content is centered | boolean | false |
scrollable | Whether to enable scrolling announcement mode | boolean | false |
scroll-speed | Seconds required to complete one scroll cycle | number | 15 |
pause-on-hover | Whether hovering pauses scrolling | boolean | true |
duration | Auto close duration in milliseconds. 0 disables auto close | number | 0 |
show-progress | Whether to show the auto-close progress bar | boolean | false |
theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Events
| Name | Description | Parameters |
|---|---|---|
close | Triggered when the close button is clicked | (event: MouseEvent) |
Slots
| Name | Description |
|---|---|
default | Description content |
title | Title content |
icon | Custom status icon |
close | Custom close area |
action | Custom action area |
Expose
This component does not expose public instance methods or properties.
Type Exports
| Name | Description |
|---|---|
YhAlertProps | Props type for YhAlert |
YhAlertEmits | Emits type for YhAlert |
YhAlertSlots | Slots type for YhAlert |
YhAlertType | Alert type union |
YhAlertEffect | Effect style union |
YhAlertInstance | Component instance type |
Theme Variables
YhAlert does not expose a full set of dedicated component-scoped theme variables. The stylesheet currently relies mainly on shared theme tokens. The scrolling announcement mode additionally consumes the variable below, and the component still supports themeOverrides.
| Variable | Description | Default |
|---|---|---|
--yh-alert-scroll-speed | Animation duration for scrolling announcements | 15s |