Alert

An inline notice bar for success, info, warning, or error messages, with support for a title, description, icon, action area, close animation, and multiple variants.

Basic usage

Four types

This is a regular info messageThe operation completed successfullyPlease save your current progressOperation failed, please try again later

Example

No title

No title

An alert with only body content and no title line.

Example

Icon

icon shows the default icon for the type; slot="icon" overrides it with custom content; prominent scales the icon up one step (combined with icon or banner).

Icon (icon)

An info notice with an iconThe operation completed successfullyPlease save your current progressOperation failed, please try again later

Example

Custom icon (slot=icon)

🚀 Replace the default icon via slot="icon" — any icon or image works.

Example

Large icon (prominent)

⚠️Clean up now Only 1.2GB of free space remains, please clean up your cache.

Example

Description

The description attribute or slot="description" renders a description line between the title and the body, coexisting with the default slot content.

Description (description)

Please save your work in advance. The system recovers automatically after maintenance. This is a slot description with rich content. An alert with only a slot description and no title.

Example

Action area

slot="action" renders an action area on the right (buttons such as view details, undo, etc.); when combined with the close button, it sits to the left of the close button.

Action area (slot=action)

Update nowLater Version v2.4.0 is available with performance improvements and bug fixes.

Example

Variants

variant supports three styles: tint (default, tinted background + border), filled (solid type color with contrasting text), and outlined (transparent background + type-colored border).

Variants (variant)

The default look: tinted background + same-color border.Solid type color background; text switches to a contrasting color.Transparent background + type-colored border.

Example

Banner

banner removes the border and border radius for a full-width strip, and shows the type icon by default (combined with icon); commonly used with center for a centered page-top banner.

Banner (banner + center)

The platform will undergo system upgrade on Saturday 00:00 - 06:00, please plan accordingly.

Example

Closable banner

Abnormal traffic detected; some requests were blocked. Please verify your account security.

Example

Centered

center horizontally centers the text area (title / description / body), commonly used with banners and plain text notices.

Centered (center)

The content area is horizontally centered.

Example

Closable

Closable

Click the ✕ on the right to close this alertA closable alert without a title

Example

Close animation & controlled visibility

Closing plays a fade-out transition and dispatches oas-after-close when done. The open attribute controls visibility (open by default); after closing, the component removes open and dispatches oas-open-change, and the host can re-open it by setting open again. With prefers-reduced-motion, the transition is skipped and the alert hides directly.

Close animation (controlled reopen)

Reopen noticeClick ✕ to close; use the button above to reopen after the animation.

Example

Controlled visibility (open)

Open (set open)Close (remove open)External buttons set / remove open to control visibility, with the same exit transition.

Example

Custom close

close-text replaces the ✕ text (and becomes the button's accessible name); slot="close" provides rich custom close content.

Custom close (close-text)

Click "Got it" on the right to close.

Example

Custom close (slot=close)

Replaces the default ✕ with an icon; click to close.

Example

Collapse

The numeric max-line attribute truncates the body with CSS line-clamp, and provides an expand / collapse toggle.

Collapse (max-line)

This release brings several improvements: a brand-new theme customization panel, faster list rendering, configurable keyboard shortcuts, and a wide range of accessibility enhancements. It also fixes several known issues, including table overflow on narrow screens and popup misalignment on low resolutions. See the full changelog for details.

Example

Accent border

The border attribute renders a type-colored accent bar on the corresponding side(s). Values are space-separated: top / end / bottom / start.

Accent border (border)

The accent bar is rendered on the top.Multiple sides can be combined.

Example

Sizes

size supports three steps: small / medium (default) / large, scaling font size and padding.

Sizes (size)

For compact scenarios.The regular size.For featured scenarios.

Example

Event feedback

Event feedback

Dispatches oas-close when closed and oas-open-change on visibility changes.

Example

API

oas-alert

Attributes

Attribute	Description	Type	Default
banner	Banner mode: no border/radius, full-width; shows icon by default	boolean	—
border	Accent bars: space-separated top/end/bottom/start (logical sides, RTL-aware) rendering a type-color bar	string	—
center	Center the text area horizontally (title/description/body); often combined with banner	boolean	—
close-text	Close button text (replaces the default ✕); rich custom content via slot="close"	string	—
closeable	Whether to show the close button	boolean	—
description	Secondary text below the title; rich content via slot="description"	string	—
icon	Show the default icon for the type (info/success/warning/error); override via slot="icon"	boolean	—
max-line	Max body lines: clamp with CSS line-clamp and show an expand/collapse toggle; not set = no clamping	string	0
open	Controlled visibility (default true): set to false on close with oas-open-change dispatched; set true again to reopen	boolean	—
prominent	Large icon: enlarge the icon one step (works with icon)	boolean	—
size	Size: small/medium/large (default medium) scaling font size and padding	string	medium
title	Title text (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use the "title" slot for rich content	string	—
type	Alert type	string	info
variant	Visual variant: tint (default, light bg + matching border) / filled (solid type color + on-color text) / outlined (transparent bg + type color border)	string	tint

Events

Event	Description
oas-after-close	Dispatched after the closing transition ends (also dispatched when prefers-reduced-motion skips the transition)
oas-close	Dispatched after the close button is clicked; the component then hides
oas-open-change	Dispatched when visibility changes, detail

Slots

Name	Description
default	Body content slot
action	Right-side action slot (e.g. "View details"/"Undo" buttons); placed left of the close button when both present
close	Rich custom close element, overrides ✕ and close-text; aria-label still falls back to close-text/locale
description	Rich description slot; overrides the description attribute when present
icon	Icon slot; overrides the default type icon
title	Rich title content slot; overrides the title attribute text when present

CSS Variables

CSS Variable	Default
--oas-alert-max-line	2