VEmptyState API

Props

name	type	default
`action-text`	string	undefined
The text used for the action button.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`headline`	string	undefined
A large headline often used for 404 pages.
`height`	string \| number	undefined
Sets the height for the component.
`href`	string	undefined
The URL the action button links to.
`icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Apply a specific icon using the v-icon component.
`image`	string	undefined
Apply a specific image using v-img.
`justify`	'end' \| 'start' \| 'center'	'center'
Control the justification of the text.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`size`	string \| number	undefined
The size used to control the dimensions of the media element inside the component. Can be specified as a number or a string (e.g., ‘50%’, ‘100px’).
`text`	string	undefined
Specify content text for the component.
`text-width`	string \| number	500
Sets the width of the text container.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`title`	string	undefined
Specify a title text for the component.
`to`	string	undefined
The URL the action button links to.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:action`	[Event]
Event emitted when the action button is clicked.

Slots

{ props: { onClick: (e: Event) => void } }

never

never

never

never

never

`actions`
Slot for the action button.
`default`
The default Vue slot.
`headline`
Slot for the component’s headline.
`media`
Slot for the component’s media.
`text`
Slot for the component’s text content.
`title`
Slot for the component’s title content.

SASS Variables

name	default
`$empty-state-actions-btn-background-color`	initial
`$empty-state-actions-btn-color`	initial
`$empty-state-actions-gap`	8px
`$empty-state-actions-padding`	16px
`$empty-state-content-padding`	24px 0
`$empty-state-headline-color`	functions.theme-color('on-surface', var(--v-medium-emphasis-opacity))
`$empty-state-headline-font-size`	functions.map-deep-get(settings.$typography, 'display-large', 'size')
`$empty-state-headline-font-weight`	functions.map-deep-get(settings.$typography, 'display-large', 'weight')
`$empty-state-headline-line-height`	functions.map-deep-get(settings.$typography, 'display-large', 'line-height')
`$empty-state-headline-margin-bottom`	8px
`$empty-state-headline-mobile-font-size`	functions.map-deep-get(settings.$typography, 'headline-large', 'size')
`$empty-state-image-padding`	16px
`$empty-state-media-icon-color`	functions.theme-color('on-surface', var(--v-medium-emphasis-opacity))
`$empty-state-min-height`	100%
`$empty-state-padding`	16px
`$empty-state-text-font-size`	functions.map-deep-get(settings.$typography, 'body-medium', 'size')
`$empty-state-text-font-weight`	functions.map-deep-get(settings.$typography, 'body-medium', 'weight')
`$empty-state-text-line-height`	functions.map-deep-get(settings.$typography, 'body-medium', 'line-height')
`$empty-state-text-padding`	0 16px
`$empty-state-title-font-size`	functions.map-deep-get(settings.$typography, 'title-large', 'size')
`$empty-state-title-font-weight`	functions.map-deep-get(settings.$typography, 'title-large', 'weight')
`$empty-state-title-line-height`	functions.map-deep-get(settings.$typography, 'title-large', 'line-height')
`$empty-state-title-margin-bottom`	4px

#VEmptyState API

VEmptyState API