VAlert API

Props

name	type	default
`border`	boolean \| 'top' \| 'end' \| 'bottom' \| 'start'	false
Adds a colored border to the component.
`border-color`	string	undefined
Specifies the color of the border. Only used in combination with border prop. Accepts any color value.
`closable`	boolean	false
Adds a close icon that can hide the alert.
`close-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$close'
Change the default icon used for closable alerts.
`close-label`	string	'$vuetify.close'
Text used for aria-label on closable alerts. Can also be customized globally in Internationalization.
`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.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`height`	string \| number	undefined
Sets the height for the component.
`icon`	\| false \| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	null
Apply a specific icon using the v-icon component.
`icon-size`	string \| number	undefined
The specific size of the icon, can use named sizes.
`icon-sizes`	['default' \| 'small' \| 'x-small' \| 'large' \| 'x-large', number][]	[ ['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32] ]
An array of tuples that define the icon sizes for each named size.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`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.
`model-value`	boolean	true
Controls whether the component is visible or hidden.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prominent`	boolean	false
Displays a larger vertically centered icon to draw more attention.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`text`	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes the component’s border-radius.
`title`	string	undefined
Specify a title text for the component.
`type`	'success' \| 'info' \| 'warning' \| 'error'	undefined
Create a specialized alert that uses a contextual color and has a pre-defined icon.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'flat'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click:close`	[MouseEvent]
Emitted when close icon is clicked.
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.

Slots

never

{ props: Record<string, any> }

never

never

never

never

`append`
Slot for icon at end of alert.
`close`
Slot for icon used in dismissible prop.
`default`
The default Vue slot.
`prepend`
Slot for icon at beginning of alert.
`text`
Slot for the component’s text content.
`title`
Slot for the component’s title content.

SASS Variables

name	default
`$alert-append-close-margin-inline-start`	16px
`$alert-append-margin-inline-start`	16px
`$alert-background`	rgb(var(--v-theme-surface-light))
`$alert-border`	( $alert-border-color, $alert-border-style, $alert-border-width, $alert-border-thin-width )
`$alert-border-color`	currentColor
`$alert-border-opacity`	.38
`$alert-border-radius`	settings.$border-radius-root
`$alert-border-style`	settings.$border-style-root
`$alert-border-thin-width`	8px
`$alert-border-width`	0
`$alert-color`	tools.theme-color('on-surface-light', var(--v-high-emphasis-opacity))
`$alert-density`	('default': 0, 'comfortable': -1, 'compact': -2)
`$alert-elevation`	1
`$alert-padding`	16px
`$alert-plain-opacity`	.62
`$alert-plain-transition`	.2s opacity settings.$standard-easing
`$alert-positions`	absolute fixed sticky
`$alert-prepend-icon-size`	1.75rem
`$alert-prepend-margin-inline-end`	16px
`$alert-text-line-height`	1.35
`$alert-title-font-size`	tools.map-deep-get(settings.$typography, 'headline-small', 'size')
`$alert-title-font-weight`	tools.map-deep-get(settings.$typography, 'headline-small', 'weight')
`$alert-title-hyphens`	auto
`$alert-title-letter-spacing`	tools.map-deep-get(settings.$typography, 'headline-small', 'letter-spacing')
`$alert-title-line-height`	1.75rem
`$alert-title-overflow-wrap`	normal
`$alert-title-text-transform`	none
`$alert-title-word-break`	normal
`$alert-title-word-wrap`	break-word
`$alert-variants`	( $alert-background, $alert-color, $alert-elevation, $alert-plain-opacity, 'v-alert' )

#VAlert API

VAlert API