v2.1.8
/
Use our Nuxt starter

Empty

An empty state component.
GitHub
Nuxt UI

Usage

No projects found

It looks like you haven't added any projects. Create one to get started.
{
  "wait": "Loading client-side content..."
}

Title

Use the title prop to set the title of the empty state.

No projects found

{
  "wait": "Loading client-side content..."
}

Description

Use the description prop to set the description of the empty state.

No projects found

It looks like you haven't added any projects. Create one to get started.
{
  "wait": "Loading client-side content..."
}

Icon

Use the icon prop to set the icon of the empty state.

No projects found

It looks like you haven't added any projects. Create one to get started.
{
  "wait": "Loading client-side content..."
}

Actions

Use the actions prop to add some Button actions to the empty state.

No projects found

It looks like you haven't added any projects. Create one to get started.
{
  "wait": "Loading client-side content..."
}

Color

Use the color prop to change the color of the empty state.

No notifications

You're all caught up. New notifications will appear here.
{
  "wait": "Loading client-side content..."
}

Inverted

Use the inverted prop to invert the color of the empty state.

Only available for air-primary* colors

No notifications

You're all caught up. New notifications will appear here.
{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the empty state.

No notifications

You're all caught up. New notifications will appear here.
{
  "wait": "Loading client-side content..."
}

Examples

With slots

Use the available slots to create a more complex empty state.

Employee Namebitrix24

No team members

Invite your team to collaborate on this project.
Employee Name

Employee Name

Team employee

Invite
Assistant Name

Employee Name

Team assistant

Invite 
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

iconIconComponent

The icon displayed above the title.

title string
description string
actions ButtonProps[]

Display a list of Button in the body.

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.

size'md' "md" | "xs" | "sm" | "lg" | "xl"
b24ui { root?: ClassNameValue; header?: ClassNameValue; indicator?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; actions?: ClassNameValue; footer?: ClassNameValue; }

Slots

Slot Type
header{}
leading{ b24ui: object; }
title{}
description{}
body{}
actions{}
footer{}

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    empty: {
      slots: {
        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-(--b24ui-background) ring ring-(--b24ui-border-color) ring-(length:--b24ui-border-width)',
        header: 'flex flex-col items-center gap-2 max-w-[384px] text-center',
        indicator: 'rounded-full text-(--b24ui-color) bg-(--b24ui-background-active) flex items-center justify-center mb-2',
        icon: 'shrink-0',
        title: 'text-(--b24ui-color) text-pretty font-(--ui-font-weight-medium)',
        description: 'text-balance text-center text-(--b24ui-color)',
        body: 'flex flex-col items-center gap-4 max-w-[384px]',
        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
        footer: 'flex flex-col items-center gap-2 max-w-[384px]'
      },
      variants: {
        size: {
          xs: {
            icon: 'size-[26px]',
            title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            icon: 'size-[28px]',
            title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            icon: 'size-[38px]',
            title: 'text-base',
            description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
          },
          lg: {
            icon: 'size-[44px]',
            title: 'text-base',
            description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
          },
          xl: {
            icon: 'size-[56px]',
            title: 'text-(length:--ui-font-size-xl)/(--ui-font-line-height-3xs)',
            description: 'text-(length:--ui-font-size-lg)/(--ui-font-line-height-3xs)'
          }
        },
        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'
          }
        },
        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: {
        empty: {
          slots: {
            root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-(--b24ui-background) ring ring-(--b24ui-border-color) ring-(length:--b24ui-border-width)',
            header: 'flex flex-col items-center gap-2 max-w-[384px] text-center',
            indicator: 'rounded-full text-(--b24ui-color) bg-(--b24ui-background-active) flex items-center justify-center mb-2',
            icon: 'shrink-0',
            title: 'text-(--b24ui-color) text-pretty font-(--ui-font-weight-medium)',
            description: 'text-balance text-center text-(--b24ui-color)',
            body: 'flex flex-col items-center gap-4 max-w-[384px]',
            actions: 'flex flex-wrap justify-center gap-2 shrink-0',
            footer: 'flex flex-col items-center gap-2 max-w-[384px]'
          },
          variants: {
            size: {
              xs: {
                icon: 'size-[26px]',
                title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              sm: {
                icon: 'size-[28px]',
                title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              md: {
                icon: 'size-[38px]',
                title: 'text-base',
                description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
              },
              lg: {
                icon: 'size-[44px]',
                title: 'text-base',
                description: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-lg)'
              },
              xl: {
                icon: 'size-[56px]',
                title: 'text-(length:--ui-font-size-xl)/(--ui-font-line-height-3xs)',
                description: 'text-(length:--ui-font-size-lg)/(--ui-font-line-height-3xs)'
              }
            },
            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'
              }
            },
            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.

DescriptionList

For instances requiring the conversion of a table row into its own table to enhance page completeness.

Table

A responsive data table component.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24