Components

Empty state

A lightweight UI component used to display a placeholder when no data is found. Useful anywhere where data is fetched and no results could be returned. Can be displayed with a styled container.

Component

View code

Show playground

Ups! No data found

No data found

Props

Props	Default	Type
`title`	`'Ups! No data found'`	`string`
`description`	—	`string`
`icon`	`'mdi:database-alert-outline'`	`string`
`iconClass`	`'text-icon-neutral-sublest'`	`string`
`titleClass`	—	`string`
`descriptionClass`	`'text-sm text-text-neutral-subtle'`	`string`
`orientation`	`Orientation.VERTICAL`	`Orientation`
`buttonText`	—	`string`
`buttonIconPosition`	—	`string`
`buttonIcon`	`'mdi:plus'`	`string`
`buttonStyleType`	`ButtonStyleType.PRIMARY_BRAND_FILLED`	`ButtonStyleType`
`hasContainer`	`false`	`boolean`
`containerStyle`	`EmptyPlaceholderContainerStyle.FILLED_NEUTRAL`	`EmptyPlaceholderContainerStyle`
`styledContainerClass`	—	`string`

Usage

title

Displays a custom title

 <template>
    <EmptyState title="Replace me" />
</template>

Type: text
Default: Ups! No data found

description

Displays a custom description. If discussion is not provided, it will not appear.

 <template>
    <EmptyState description="Example description" />
</template>

Type: text

icon

Sets the icon to be displayed.

 <template>
    <EmptyState icon="mdi:database-alert-outline" />
</template>

Type: string
Default: 'mdi:database-alert-outline'

iconClass

Sets custom class to the icon.

 <template>
    <EmptyState iconClass="text-icon-neutral-sublest" />
</template>

Type: string
Default: 'text-icon-neutral-sublest'

titleClass

Sets custom class to the title.

 <template>
    <EmptyState titleClass="text-base" />
</template>

Type: string

descriptionClass

Sets custom class to the description.

 <template>
    <EmptyState descriptionClass="text-sm text-text-neutral-subtle" />
</template>

Type: string
Default: 'text-sm text-text-neutral-subtle'

orientation

Sets the layout direction empty state content. Uses the Orientation enum.

 <template>
    <EmptyState :orientation="Orientation.VERTICAL" />
</template>

Type: Orientation
Default: Orientation.VERTICAL

Options

Value	Description
`HORIZONTAL`	horizontal
`VERTICAL`	vertical

buttonText

Sets the text of the button.

 <template>
    <EmptyState buttonText="Add new data" />
</template>

Type: string

buttonIconPosition

Sets the position of the button icon. Uses the IconPosition enum.

 <template>
    <EmptyState :buttonIconPosition="IconPosition.LEFT" />
</template>

Type: IconPosition
Default: IconPosition.LEFT

Options

Value	Description
`LEFT`	left
`RIGHT`	right
`NONE`	none (icon does not appear at all)

buttonIcon

Sets the icon of the button.

 <template>
    <EmptyState 
        :buttonIconPosition="IconPosition.LEFT" 
        buttonIcon="mdi:plus" 
    />
</template>

Type: string

buttonStyleType

Controls the empty state optional button's visual variant using ButtonStyleType enum.

 <template>
    <EmptyState 
        buttonText="Add new"
        :buttonStyleType="ButtonStyleType.PRIMARY_BRAND_FILLED" 
    />
</template>

Type: ButtonStyleType
Default: ButtonStyleType.PRIMARY_BRAND_FILLED

Options

Value	Description
`PRIMARY_BRAND_FILLED`	Primary brand filled
`PRIMARY_BRAND_TRANSPARENT`	Primary brand transparent
`PRIMARY_BRAND_SOFT`	Primary brand soft
`SECONDARY_BRAND_FILLED`	Secondary brand filled
`NEUTRAL_OUTLINED`	Neutral outlined
`NEUTRAL_TRANSPARENT`	Neutral transparent
`NEUTRAL_TRANSPARENT_SUBTLE`	Neutral transparent subtle
`NEUTRAL_FILLED`	Neutral filled
`DELETE_FILLED`	Delete filled
`DELETE_OUTLINED`	Delete outlined
`DELETE_SOFT`	Delete soft
`DELETE_TRANSPARENT`	Delete transparent

hasContainer

Enables the empty state container.

 <template>
    <EmptyState hasContainer />
</template>

Type: boolean
Default: false

containerStyle

Sets the style of the empty state container. Uses the EmptyPlaceholderContainerStyle enum.

You need to enable the container first in order to use this option.

 <template>
    <EmptyState 
        hasContainer
        :containerStyle="EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND" 
    />
</template>

Type: EmptyPlaceholderContainerStyle
Default: EmptyPlaceholderContainerStyle.FILLED_NEUTRAL

Options

Value	Description
`DASHED`	Dashed-styled outline container
`FILLED_NEUTRAL`	Light gray background styled container
`FILLED_PRIMARY_BRAND`	Soft primary brand background color styled container

styledContainerClass

Sets custom class to the main styled container.

You need to enable the container first in order to use this option.

 <template>
    <EmptyState 
        hasContainer
        styledContainerClass="rounded-2xl"
    />
</template>

Emits

Value	Description
`@buttonClick`	Triggers a callback function when clicking on the button

Example

 <template>
    <EmptyState 
        @buttonClick="handleClick"
    />
</template>
<script setup lang="ts">
const handleClick = () => {
    console.log("Button clicked")
}
</script>