Alert

An alert designed to capture the user's attention.

Nuxt UI

Git

Usage

Title

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

<template>
  <B24Alert title="Heads up!" />
</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'
</script>

<template>
  <B24Alert
    :icon="SignIcon"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
  />
</template>

Avatar

Use the avatar prop to show an Avatar.

Details

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

<template>
  <B24Alert
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
  />
  <B24Alert
    :avatar="{ icon: SignIcon }"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
  />
</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']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default' as const
})
</script>

<template>
  <B24Alert
    :color="color"
    :icon="SignIcon"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
  />
</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']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

<template>
  <B24Alert
    :size="size"
    :icon="SignIcon"
    color="ai"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
  />
</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 SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
</script>

<template>
  <B24Alert
    :icon="SignIcon"
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
    close
  />
</template>

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

Details

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

<template>
  <B24Alert
    title="Heads up!"
    description="Let's signal the manager that the deal is not moving."
    color="success"
    :icon="SignIcon"
    :close="{
      color: 'success',
      depth: 'light',
      class: 'rounded-full'
    }"
  />
</template>

Actions

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

Details

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

export interface ExampleProps {
  description?: string
}

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

<template>
  <B24Alert
    title="Heads up!"
    color="collab"
    :icon="SignIcon"
    :description="description"
    :actions="[
      {
        label: 'Action 1',
        color: 'primary'
      },
      {
        label: 'Action 2',
        color: 'collab'
      }
    ]"
  />
</template>

Orientation

Use the orientation prop to change the orientation 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 {
  orientation: AlertProps['orientation']
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal' as const,
  description: 'Let\'s signal the manager that the deal is not moving.'
})
</script>

<template>
  <B24Alert
    title="Heads up!"
    color="collab"
    :orientation="orientation"
    :icon="SignIcon"
    :description="description"
    :actions="[
      {
        label: 'Action 1',
        color: 'primary'
      },
      {
        label: 'Action 2',
        color: 'collab'
      }
    ]"
  />
</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
avatar		AvatarProps
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
orientation	"vertical"	"vertical" | "horizontal"
size		"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: 'xs' }`{lang="ts-type"}
close	false	boolean | Partial<ButtonProps> Display a close button to dismiss the alert. `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
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		Partial<{ root: string; wrapper: string; title: string; description: string; icon: string; avatar: string; avatarSize: string; actions: string; close: string; }>

Slots

Slot	Type
leading	{}
title	{}
description	{}
actions	{}
close	{ b24ui: any; }

Emits

Event	Type