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.
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.
Props
variant:string— optional
default:default
Visual style of the alert. Options: default, info, success, warning, destructive.
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.
Emits
@close
Emitted when the close button is clicked.
CSS Variables
The alert component can be customized using the following CSS variables. You can add variants in the Component File directly.
--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.