Alert

An alert designed to capture the user's attention.

Nuxt UI

Git

Demo

Usage

Title

Use the title prop to set the title of the Alert.

<script setup lang="ts">
export interface ExampleProps {
  title?: string
}

withDefaults(defineProps<ExampleProps>(), {
  title: 'Heads up!'
})
</script>

<template>
  <B24Alert :title="title" />
</template>

Description

Use the description prop to set the description of the Alert.

Details

<script setup lang="ts">
export interface ExampleProps {
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :title="title"
    :description="description"
  />
</template>

Icon

Use the icon prop to show an @bitrix24/b24icons.

Details

<script setup lang="ts">
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :icon="SignIcon"
    :title="title"
    :description="description"
  />
</template>

Avatar

Use the avatar prop to show an Avatar.

Details

<script setup lang="ts">
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :avatar="{ src: '/b24ui/avatar/employee.png', size: 'xs' }"
    :title="title"
    :description="description"
  />
  <B24Alert
    :avatar="{ icon: SignIcon, size: 'lg' }"
    :title="title"
    :description="description"
  />
</template>

Color

Use the color prop to change the color of the Alert.

Details

<script setup lang="ts">
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :color="color"
    :icon="SignIcon"
    :title="title"
    :description="description"
  />
</template>

Inverted

Use the inverted prop to invert the color of the Alert.

WARNING

Only available for air-primary* colors

Details

<script setup lang="ts">
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  isInverted?: boolean
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  isInverted: false,
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :inverted="isInverted"
    :color="color"
    :icon="SignIcon"
    :title="title"
    :description="description"
  />
</template>

Size

Use the size prop to change the size of the Alert.

Details

<script setup lang="ts">
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  size?: AlertProps['size']
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as AlertProps['size'],
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :size="size"
    :icon="SignIcon"
    :color="color"
    :title="title"
    :description="description"
  />
</template>

Close

Use the close prop to display a Button to dismiss the Alert.

TIP

An update:open event will be emitted when the close button is clicked.

Details

<script setup lang="ts">
import { ref } from 'vue'
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  size?: AlertProps['size']
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as AlertProps['size'],
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})

const isOpen = ref(true)
</script>

<template>
  <B24Alert
    v-show="isOpen"
    v-model:open="isOpen"
    close
    :icon="SignIcon"
    :color="color"
    :title="title"
    :description="description"
    :size="size"
  />
  <B24FormField
    v-show="!isOpen"
    label="isOpen"
  >
    <B24Switch v-model="isOpen" />
  </B24FormField>
</template>

You can pass any property from the Button component to customize it.

Details

<script setup lang="ts">
import { ref } from 'vue'
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  size?: AlertProps['size']
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as AlertProps['size'],
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})

const isOpen = ref(true)
</script>

<template>
  <B24Alert
    v-show="isOpen"
    v-model:open="isOpen"
    :close="{ color: 'air-primary-success', rounded: true }"
    :icon="SignIcon"
    :color="color"
    :title="title"
    :description="description"
    :size="size"
  />
  <B24FormField
    v-show="!isOpen"
    label="isOpen"
  >
    <B24Switch v-model="isOpen" />
  </B24FormField>
</template>

Actions

Use the actions prop to add some Button actions to the Alert.

Details

<script setup lang="ts">
import { alertSimpleItems } from './../dictionary'
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  size?: AlertProps['size']
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as AlertProps['size'],
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :actions="alertSimpleItems"
    :icon="SignIcon"
    :color="color"
    :title="title"
    :description="description"
    :size="size"
  />
</template>

alertSimpleItems

export const alertSimpleItems = [
  {
    label: 'View',
    color: 'air-secondary-accent-1' as ButtonProps['color']
  },
  {
    label: 'Copy',
    color: 'air-secondary-accent-2' as ButtonProps['color']
  }
] satisfies ButtonProps[]

Orientation

Use the orientation prop to change the orientation of the Alert.

Details

<script setup lang="ts">
import { alertSimpleItems } from './../dictionary'
import type { AlertProps } from '@bitrix24/b24ui-nuxt'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'

export interface ExampleProps {
  orientation?: AlertProps['orientation']
  size?: AlertProps['size']
  color?: AlertProps['color']
  title?: string
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal' as AlertProps['orientation'],
  color: 'air-primary' as AlertProps['color'],
  title: 'Heads up!',
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    :orientation="orientation"
    :icon="SignIcon"
    :color="color"
    :title="title"
    :description="description"
    :size="size"
    :actions="alertSimpleItems"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
title		string
description		string
icon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
avatar		AvatarProps
color	'default'	"default" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-primary-warning" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2"
inverted	false	boolean If set to `true` the color is inverted. Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
orientation	"vertical"	"vertical" | "horizontal" The orientation between the content and the actions.
size	'md'	"md" | "sm"
actions		ButtonProps[] Display a list of actions: - under the title and description when orientation is `vertical` - next to the close button when orientation is `horizontal` `{ size: 'sm' }`{lang="ts"}
close	false	boolean | Partial<ButtonProps> Display a close button to dismiss the alert. `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts"}
closeIcon	icons.close	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon displayed in the close button.
b24ui		{ root?: ClassNameValue; wrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; }

Slots

Slot	Type
leading	{}
title	{}
description	{}
actions	{}
close	{ b24ui: { root: (props?: Record<string, any>) => string; wrapper: (props?: Record<string, any> | undefined) => string; title: (props?: Record<string, any> | undefined) => string; description: (props?: Record<string, any> | undefined) => string; icon: (props?: Record<string, any> | undefined) => string; avatar: (props?: Record<string, any> | undefined) => string; avatarSize: (props?: Record<string, any> | undefined) => string; actions: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; }; }

Emits

/**
 * Emitted events for the Alert component
 */
interface AlertEmits {
  update:open: (payload: [value: boolean]) => void;
}