Usage
Title
Use the title prop to set the title of the Alert.
Heads up!
<template>
<B24Alert title="Heads up!" />
</template>
Description
Use the description prop to set the description of the Alert.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
/>
</template>
Icon
Use the icon prop to show an Icon.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Alert
:icon="RocketIcon"
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
/>
</template>
Avatar
Use the avatar prop to show an Avatar.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
:avatar="{
src: '/b24ui/avatar/employee.png',
size: 'xs',
loading: 'lazy'
}"
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
/>
</template>
Color
Use the color prop to change the color of the Alert.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Alert
color="air-primary"
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
:icon="RocketIcon"
close
/>
</template>
Inverted
Use the inverted prop to invert the color of the Alert.
Only available for
air-primary* colorsHeads up!
We will immediately notify the manager that the deal is not progressing.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Alert
inverted
color="air-primary"
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
:icon="RocketIcon"
close
/>
</template>
Size
Use the size prop to change the size of the Alert.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Alert
size="md"
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
:icon="RocketIcon"
/>
</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!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
close
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
/>
</template>
You can pass any property from the Button component to customize it.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
:close="{
color: 'air-secondary-accent-2',
class: 'rounded-full'
}"
/>
</template>
Actions
Use the actions prop to add some Button actions to the Alert.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
:actions="{
'0': {
label: 'Action 1'
},
'1': {
label: 'Action 2',
color: 'air-primary'
}
}"
/>
</template>
Orientation
Use the orientation prop to change the orientation of the Alert.
Heads up!
We will immediately notify the manager that the deal is not progressing.
<template>
<B24Alert
title="Heads up!"
description="We will immediately notify the manager that the deal is not progressing."
orientation="horizontal"
:actions="{
'0': {
label: 'Action 1'
},
'1': {
label: 'Action 2',
color: 'air-primary'
}
}"
/>
</template>
API
Props
Slots
Emits
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/alert.ts
export default {
slots: {
root: 'relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md)',
wrapper: 'min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]',
title: 'font-(--ui-font-weight-bold)',
description: '',
icon: 'shrink-0 size-6',
avatar: 'shrink-0',
avatarSize: '',
actions: 'flex flex-wrap gap-1.5 shrink-0',
close: 'p-0 [--ui-btn-color:var(--b24ui-color)] hover:bg-(--ui-color-base-white-fixed)/10 focus-visible:bg-(--ui-color-base-white-fixed)/10 -me-1.5 lg:me-0'
},
variants: {
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
},
'air-secondary': {
root: 'style-tinted'
},
'air-secondary-alert': {
root: 'style-tinted-alert'
},
'air-secondary-accent': {
root: 'style-outline'
},
'air-secondary-accent-1': {
root: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
root: 'style-outline-accent-2'
},
'air-tertiary': {
root: 'style-outline-no-accent'
},
default: {
root: 'style-old-default'
},
danger: {
root: 'style-old-danger'
},
success: {
root: 'style-old-success'
},
warning: {
root: 'style-old-warning'
},
primary: {
root: 'style-old-primary'
},
secondary: {
root: 'style-old-secondary'
},
collab: {
root: 'style-old-collab'
},
ai: {
root: 'style-old-ai'
}
},
size: {
sm: {
root: 'py-xs ps-sm pe-xs gap-2',
title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
avatarSize: 'md'
},
md: {
root: 'py-md ps-md pe-xs gap-2.5',
title: 'text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)',
description: 'text-(length:--ui-font-size-md)/(--ui-font-line-height-3xs)',
avatarSize: 'xl'
}
},
orientation: {
horizontal: {
root: 'items-center',
actions: 'items-center'
},
vertical: {
root: 'items-start',
actions: 'items-start mt-2'
}
},
title: {
true: {
description: 'mt-1'
}
},
inverted: {
true: '',
false: ''
}
},
compoundVariants: [
{
inverted: true,
color: 'air-primary',
class: {
root: 'style-filled-inverted'
}
}
],
defaultVariants: {
color: 'air-secondary-accent',
size: 'md',
inverted: false
}
}