Alert
Displays contextual feedback messages with variants, icons, and optional close functionality. Alerts provide important information to users in a non-intrusive way with proper accessibility support.
Install
Run the following command to install the alert component:
npx acc-nuxt add AlertVariants
Default
InformationThis is an informational alert message.
Info
InformationThis is an informational alert message.
Success
SuccessYour action was completed successfully.
Warning
WarningPlease review this important information.
Destructive
ErrorAn error occurred. Please try again.
Feature
FeatureThere is a cool new feature.
With Close Button
Dismissible AlertClick the close button to dismiss this alert.
Title Only
Operation completed successfully
Description Only
This alert only has a description without a title.
Custom Icon
Custom IconThis alert uses a custom icon instead of the default variant icon.
Custom Close Icon
Custom Close ButtonThis alert has a custom close icon.
Props
variant:'default' | 'info' | 'success' | 'warning' | 'destructive' | 'feature'— optional
default:default
Visual style of the alert.
title:string— optional
default:undefined
Title text displayed in the alert.
description:string— optional
default:undefined
Description text displayed below the title.
close:boolean— optional
default:false
Whether to show the close button.
closeLabel:string— optional
default:Close alert
Accessible label for the close button.
Bindings
Use the named model binding to control whether the alert is visible.
v-model:open:boolean
default:true
Controls whether the alert is visible. Closing the alert sets this value to false.
Emits
@update:open
Emitted when the component changes the open state for v-model:open. Dismissing the alert sets it to false.
@close
Emitted when the close handler is invoked. This also dismisses the alert through v-model:open.
Slots
The alert component provides the following slots for customization.
#icon
Slot for a custom icon. Overrides the default variant icon.
#title
Slot for custom title content. Overrides the title prop.
#description
Slot for custom description content. Overrides the description prop.
#close
Slot for a custom close button icon. Only visible when close prop is true.
CSS Variables
The alert component can be customized using the following CSS variables. You can add variants in the copied wrapper file.
--lev-alert-gap
default:8px
Gap between icon, content, and close button.
--lev-alert-padding
default:12px
Padding around the alert content.
--lev-alert-border-radius
default:8px
Border radius of the alert container.
--lev-alert-border-width
default:1px
Width of the alert border.
--lev-alert-content-gap
default:8px
Gap between title and description.
--lev-alert-close-opacity
default:0.7
Opacity of the close button in its default state.
--lev-alert-close-opacity-hover
default:1
Opacity of the close button on hover.
--lev-alert-icon-display
default:flex
Display property for the icon container.
--lev-alert-icon-align-items
default:flex-start
Align items property for the icon container.
--lev-alert-icon-justify-content
default:flex-start
Justify content property for the icon container.
Wrapper Configuration
Edit the copied wrapper to change which variants are available to consumers.
allowedVariants:readonly string[]
default:['default', 'info', 'success', 'warning', 'destructive', 'feature']
Variants supported by the copied wrapper. Edit this array when adding or removing supported variants.