Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt
Use this file to discover all available pages before exploring further.
Usage
Use the UAlert component to display alert messages with various styles and configurations.
<template>
<UAlert
title="Success"
description="Your changes have been saved."
color="primary"
variant="solid"
/>
</template>
Props
The element or component this component should render as.
title
The title of the alert.
description
The description text of the alert.
icon
- Type:
string (Iconify icon name)
The icon to display on the left side of the alert.
<UAlert
icon="i-heroicons-check-circle"
title="Success"
description="Operation completed successfully."
/>
avatar
Display an avatar instead of an icon.
<UAlert
:avatar="{ src: '/avatar.jpg', alt: 'User' }"
title="New message"
description="You have a new message from John."
/>
color
- Type:
string
- Default:
'primary'
The color theme of the alert. Available colors: primary, neutral, or any custom color from your theme.
variant
- Type:
'solid' | 'outline' | 'soft' | 'subtle'
- Default:
'solid'
The visual style variant of the alert.
<UAlert variant="outline" title="Info" description="This is an outline alert." />
<UAlert variant="soft" title="Warning" description="This is a soft alert." />
<UAlert variant="subtle" title="Error" description="This is a subtle alert." />
orientation
- Type:
'vertical' | 'horizontal'
- Default:
'vertical'
The orientation between the content and the actions.
actions
Display a list of action buttons. Actions appear under the title and description when orientation is vertical, or next to the close button when orientation is horizontal.
<UAlert
title="Confirmation Required"
description="Do you want to proceed with this action?"
:actions="[
{ label: 'Confirm', color: 'primary' },
{ label: 'Cancel', variant: 'ghost' }
]"
/>
close
- Type:
boolean | Omit<ButtonProps, LinkPropsKeys>
- Default:
false
Display a close button to dismiss the alert. When clicked, emits update:open event with false.
<script setup>
const isOpen = ref(true)
</script>
<template>
<UAlert
v-if="isOpen"
title="Dismissible Alert"
close
@update:open="isOpen = $event"
/>
</template>
closeIcon
- Type:
string (Iconify icon name)
- Default:
appConfig.ui.icons.close
The icon displayed in the close button.
class
Additional CSS classes to apply to the component.
Customize the component’s styling. Available slots:
root - The root containerwrapper - The content wrappertitle - The title elementdescription - The description elementicon - The icon elementavatar - The avatar elementavatarSize - The avatar sizeactions - The actions containerclose - The close button
Events
update:open
- Type:
(value: boolean) => void
Emitted when the close button is clicked.
Slots
leading
- Props:
{ ui: Alert['ui'] }
Customize the leading icon or avatar.
<UAlert title="Custom Icon">
<template #leading>
<div class="i-heroicons-star size-5" />
</template>
</UAlert>
title
Customize the title content.
description
Customize the description content.
actions
Customize the actions section.
close
- Props:
{ ui: Alert['ui'] }
Customize the close button.
Examples
Basic Alert
<UAlert
title="Welcome!"
description="Thanks for signing up."
/>
Alert with Icon
<UAlert
icon="i-heroicons-information-circle"
title="Information"
description="Please read the documentation carefully."
color="primary"
/>
Alert with Actions
<UAlert
title="Update Available"
description="A new version of the app is available."
:actions="[
{ label: 'Update Now', color: 'primary' },
{ label: 'Later', variant: 'ghost' }
]"
/>
Horizontal Layout
<UAlert
orientation="horizontal"
icon="i-heroicons-check-circle"
title="Success"
description="Your profile has been updated."
close
/>
Different Variants
<UAlert variant="solid" title="Solid" description="Solid variant alert" />
<UAlert variant="outline" title="Outline" description="Outline variant alert" />
<UAlert variant="soft" title="Soft" description="Soft variant alert" />
<UAlert variant="subtle" title="Subtle" description="Subtle variant alert" />