Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Alert

Inline notices for system, feature, or page status—success, warning, error, or info. Use alerts when the message should stay visible until addressed.

#
Usage

Basic example with common props.

Default
Outlined
Hello
Error
Warning
Success
Success

#API

Alert

props

Name
Description
Type
Default
Values
Required
color
Theme or CSS color used for the control accents.
String
type
Semantic alert type (info, success, error, warning). Controls the default icon.
String
infosuccesserrorwarning
glow
Soft colored glow behind the alert.
Boolean
false
light
Tinted background using the color at low opacity.
Boolean
false
outlined
Outline style with a transparent fill.
Boolean
false
removable
Shows a close control that emits `remove`.
Boolean
false
closeLabel
Accessible label for the remove button.
String

slots

Name
Description
default
Alert message content.
icon
Custom icon; overrides the type-based icon.
removeIcon
Custom icon for the remove button.

emits

Name
Description
remove
Emitted when the remove button is clicked.
accordion
avatar