Alert
A callout to draw user's attention.
Usage
Title
Use the title prop to set the title of the Alert.
Heads up!
<template>
<PAlert title="Heads up!" />
</template>
Description
Use the description prop to set the description of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert title="Heads up!" description="You can change the primary color in your app config." />
</template>
Icon
Use the icon prop to show an Icon.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
icon="i-lucide:terminal"
/>
</template>
Avatar
Use the avatar prop to show an Avatar.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
:avatar="{
src: 'https://github.com/nuxt.png'
}"
/>
</template>
Color
Use the color prop to change the color of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
color="neutral"
title="Heads up!"
description="You can change the primary color in your app config."
icon="i-lucide:terminal"
/>
</template>
Variant
Use the variant prop to change the variant of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
color="neutral"
variant="subtle"
title="Heads up!"
description="You can change the primary color in your app config."
icon="i-lucide:terminal"
/>
</template>
Close
Use the close prop to display a Button to dismiss the Alert.
An
update:open event will be emitted when the close button is clicked.Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
color="neutral"
variant="outline"
close
/>
</template>
You can pass any property from the Button component to customize it.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
color="neutral"
variant="outline"
:close="{
color: 'primary',
variant: 'outline',
class: 'akar:rounded-full'
}"
/>
</template>
Close Icon
Use the close-icon prop to customize the close button Icon. Defaults to i-lucide:x.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
color="neutral"
variant="outline"
close
close-icon="i-lucide:arrow-right"
/>
</template>
Actions
Use the actions prop to add some Button actions to the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
color="neutral"
variant="outline"
:actions="[
{
label: 'Action 1'
},
{
label: 'Action 2',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Orientation
Use the orientation prop to change the orientation of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
color="neutral"
variant="outline"
orientation="horizontal"
:actions="[
{
label: 'Action 1'
},
{
label: 'Action 2',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Examples
class prop
Use the class prop to override the base styles of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
class="rounded-none"
/>
</template>
pohon prop
Use the pohon prop to override the slots styles of the Alert.
Heads up!
You can change the primary color in your app config.
<template>
<PAlert
title="Heads up!"
description="You can change the primary color in your app config."
icon="i-lucide:rocket"
:pohon="{
icon: 'akar:size-11'
}"
/>
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Theme
We use unocss-variants to customize the theme. Read more about it in the theming guide.
Below is the theme configuration skeleton for the PAlert. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
app.config.ts
export default defineAppConfig({
pohon: {
alert: {
slots: {
root: '',
wrapper: '',
title: '',
description: '',
icon: '',
avatar: '',
avatarSize: '',
actions: '',
close: ''
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
orientation: {
horizontal: {
root: '',
actions: ''
},
vertical: {
root: '',
actions: ''
}
},
title: {
true: {
description: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid'
}
}
}
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
alert: {
slots: {
root: '',
wrapper: '',
title: '',
description: '',
icon: '',
avatar: '',
avatarSize: '',
actions: '',
close: ''
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
orientation: {
horizontal: {
root: '',
actions: ''
},
vertical: {
root: '',
actions: ''
}
},
title: {
true: {
description: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid'
}
}
}
};
Changelog
No recent changes