v2.1.8
/
Use our Nuxt starter

Alert

An alert designed to capture the user's attention.
GitHub
Demo
Nuxt UI

Usage

Title

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

Heads up!
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

Icon

Use the icon prop to show an Icon.

Heads up!
We will immediately notify the manager that the deal is not progressing.
{
  "wait": "Loading client-side content..."
}

Avatar

Use the avatar prop to show an Avatar.

Heads up!
We will immediately notify the manager that the deal is not progressing.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

Inverted

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

Only available for air-primary* colors
Heads up!
We will immediately notify the manager that the deal is not progressing.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

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.
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

title string
description string
iconIconComponent

Display an icon on the left side.

avatar AvatarProps
color'air-secondary-accent'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary"
invertedfalseboolean

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' }
closefalseboolean | Partial<ButtonProps>

Display a close button to dismiss the alert. { size: 'md', color: 'air-tertiary-no-accent' }

closeIconicons.closeIconComponent

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{ b24ui: object; }
title{}
description{}
actions{}
close{ b24ui: object; }

Emits

Event Type
update:open[value: boolean]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    alert: {
      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
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        alert: {
          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
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Advice

A couple of lines of text and an avatar

Avatar

An img element that includes fallback and supports Nuxt Image.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24