vuetify/dist/json/attributes.json

Vue Material Component Framework

{
  "v-app/id": {
    "type": "string",
    "description": "Sets the DOM id on the component"
  },
  "v-app-bar/absolute": {
    "type": "boolean",
    "description": "Applies position: absolute to the component."
  },
  "v-app-bar/app": {
    "type": "boolean",
    "description": "Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside **outside** of `v-main` component to function properly. You can more information about layouts on the [application page](/components/application). **Note:** this prop automatically applies **position: fixed** to the layout element. You can overwrite this functionality by using the `absolute` prop"
  },
  "v-app-bar/bottom": {
    "type": "boolean",
    "description": "Aligns the component towards the bottom."
  },
  "v-app-bar/clipped-left": {
    "type": "boolean",
    "description": "Designates that the application's `v-navigation-drawer` that is positioned on the left is below the app-bar."
  },
  "v-app-bar/clipped-right": {
    "type": "boolean",
    "description": "Designates that the application's `v-navigation-drawer` that is positioned on the right is below the app-bar."
  },
  "v-app-bar/collapse": {
    "type": "boolean",
    "description": "Puts the toolbar into a collapsed state reducing its maximum width."
  },
  "v-app-bar/collapse-on-scroll": {
    "type": "boolean",
    "description": "Puts the app-bar into a collapsed state when scrolling."
  },
  "v-app-bar/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-app-bar/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-app-bar/dense": {
    "type": "boolean",
    "description": "Reduces the height of the toolbar content to 48px (96px when using the **prominent** prop)."
  },
  "v-app-bar/elevate-on-scroll": {
    "type": "boolean",
    "description": "Elevates the app-bar when scrolling."
  },
  "v-app-bar/elevation": {
    "type": "number|string",
    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
  },
  "v-app-bar/extended": {
    "type": "boolean",
    "description": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop, and any of the other props that affect the height of the toolbar, e.g. **prominent**, **dense**, etc., **WITH THE EXCEPTION** of **height**."
  },
  "v-app-bar/extension-height": {
    "type": "number|string",
    "description": "Specify an explicit height for the `extension` slot. "
  },
  "v-app-bar/fade-img-on-scroll": {
    "type": "boolean",
    "description": "When using the **src** prop or `img` slot, will fade the image when scrolling."
  },
  "v-app-bar/fixed": {
    "type": "boolean",
    "description": "Applies **position: fixed** to the component."
  },
  "v-app-bar/flat": {
    "type": "boolean",
    "description": "Removes the toolbar's box-shadow."
  },
  "v-app-bar/floating": {
    "type": "boolean",
    "description": "Applies **display: inline-flex** to the component."
  },
  "v-app-bar/height": {
    "type": "number|string",
    "description": "Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. **prominent**, **dense**, **extended**, etc."
  },
  "v-app-bar/hide-on-scroll": {
    "type": "boolean",
    "description": "Hides the app-bar when scrolling. Will still show the `extension` slot."
  },
  "v-app-bar/inverted-scroll": {
    "type": "boolean",
    "description": "Hides the app-bar when scrolling down and displays it when scrolling up."
  },
  "v-app-bar/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-app-bar/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-app-bar/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-app-bar/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-app-bar/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-app-bar/outlined": {
    "type": "boolean",
    "description": "Removes elevation (box-shadow) and adds a *thin* border."
  },
  "v-app-bar/prominent": {
    "type": "boolean",
    "description": "Increases the height of the toolbar content to 128px."
  },
  "v-app-bar/rounded": {
    "type": "boolean|string",
    "description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
  },
  "v-app-bar/scroll-off-screen": {
    "type": "boolean",
    "description": "Hides the app-bar when scrolling. Will **NOT** show the `extension` slot."
  },
  "v-app-bar/scroll-target": {
    "type": "string",
    "description": "Designates the element to target for scrolling events. Uses `window` by default."
  },
  "v-app-bar/scroll-threshold": {
    "type": "string|number",
    "description": "The amount of scroll distance down before **hide-on-scroll** activates."
  },
  "v-app-bar/shaped": {
    "type": "boolean",
    "description": "Applies a large border radius on the top left and bottom right of the card."
  },
  "v-app-bar/short": {
    "type": "boolean",
    "description": "Reduce the height of the toolbar content to 56px (112px when using the **prominent** prop)."
  },
  "v-app-bar/shrink-on-scroll": {
    "type": "boolean",
    "description": "Shrinks a **prominent** toolbar to a **dense** or **short** (default) one when scrolling."
  },
  "v-app-bar/src": {
    "type": "string|object",
    "description": "Image source. See `v-img` for details"
  },
  "v-app-bar/tag": {
    "type": "string",
    "description": "Specify a custom tag used on the root element."
  },
  "v-app-bar/tile": {
    "type": "boolean",
    "description": "Removes the component's **border-radius**."
  },
  "v-app-bar/value": {
    "type": "boolean",
    "description": "Controls whether the component is visible or hidden."
  },
  "v-app-bar/width": {
    "type": "number|string",
    "description": "Sets the width for the component."
  },
  "v-alert/border": {
    "type": "string",
    "description": "Puts a border on the alert. Accepts **top** \\| **right** \\| **bottom** \\| **left**."
  },
  "v-alert/close-icon": {
    "type": "string",
    "description": "Change the default icon used for **dismissible** alerts."
  },
  "v-alert/close-label": {
    "type": "string",
    "description": "Text used for *aria-label* on **dismissible** alerts. Can also be customizing globally in [Internationalization](/customization/internationalization)."
  },
  "v-alert/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-alert/colored-border": {
    "type": "boolean",
    "description": "Applies the defined **color** to the alert's border."
  },
  "v-alert/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-alert/dense": {
    "type": "boolean",
    "description": "Hides the alert icon and decreases component's height."
  },
  "v-alert/dismissible": {
    "type": "boolean",
    "description": "Adds a close icon that can hide the alert."
  },
  "v-alert/elevation": {
    "type": "number|string",
    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
  },
  "v-alert/height": {
    "type": "number|string",
    "description": "Sets the height for the component."
  },
  "v-alert/icon": {
    "type": "boolean|string",
    "description": "Designates a specific icon."
  },
  "v-alert/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-alert/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-alert/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-alert/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-alert/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-alert/mode": {
    "type": "string",
    "description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/v2/api/#transition)."
  },
  "v-alert/origin": {
    "type": "string",
    "description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)."
  },
  "v-alert/outlined": {
    "type": "boolean",
    "description": "Makes the background transparent and applies a thin border."
  },
  "v-alert/prominent": {
    "type": "boolean",
    "description": "Displays a larger vertically centered icon to draw more attention."
  },
  "v-alert/rounded": {
    "type": "boolean|string",
    "description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
  },
  "v-alert/shaped": {
    "type": "boolean",
    "description": "Applies a large border radius on the top left and bottom right of the card."
  },
  "v-alert/tag": {
    "type": "string",
    "description": "Specify a custom tag used on the root element."
  },
  "v-alert/text": {
    "type": "boolean",
    "description": "Applies the defined **color** to text and a low opacity background of the same."
  },
  "v-alert/tile": {
    "type": "boolean",
    "description": "Removes the component's border-radius."
  },
  "v-alert/transition": {
    "type": "string",
    "description": "Sets the component transition. Can be one of the [built in transitions](/styles/transitions) or one your own."
  },
  "v-alert/type": {
    "type": "string",
    "description": "Specify a **success**, **info**, **warning** or **error** alert. Uses the contextual color and has a pre-defined icon."
  },
  "v-alert/value": {
    "type": "boolean",
    "description": "Controls whether the component is visible or hidden."
  },
  "v-alert/width": {
    "type": "number|string",
    "description": "Sets the width for the component."
  },
  "v-autocomplete/allow-overflow": {
    "type": "boolean",
    "description": "Allow the menu to overflow off the screen"
  },
  "v-autocomplete/append-icon": {
    "type": "string",
    "description": "Appends an icon to the component, uses the same syntax as `v-icon`"
  },
  "v-autocomplete/append-outer-icon": {
    "type": "string",
    "description": "Appends an icon to the outside the component's input, uses same syntax as `v-icon`"
  },
  "v-autocomplete/attach": {
    "type": "any",
    "description": "Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root `v-app` component by default."
  },
  "v-autocomplete/auto-select-first": {
    "type": "boolean",
    "description": "When searching, will always highlight the first option"
  },
  "v-autocomplete/autofocus": {
    "type": "boolean",
    "description": "Enables autofocus"
  },
  "v-autocomplete/background-color": {
    "type": "string",
    "description": "Changes the background-color of the input"
  },
  "v-autocomplete/cache-items": {
    "type": "boolean",
    "description": "Keeps a local _unique_ copy of all items that have been passed through the **items** prop."
  },
  "v-autocomplete/chips": {
    "type": "boolean",
    "description": "Changes display of selections to chips"
  },
  "v-autocomplete/clear-icon": {
    "type": "string",
    "description": "Applied when using **clearable** and the input is dirty"
  },
  "v-autocomplete/clearable": {
    "type": "boolean",
    "description": "Add input clear functionality, default icon is Material Design Icons **mdi-clear**"
  },
  "v-autocomplete/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-autocomplete/counter": {
    "type": "boolean|number|string",
    "description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation."
  },
  "v-autocomplete/counter-value": {
    "type": "function",
    "description": ""
  },
  "v-autocomplete/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-autocomplete/deletable-chips": {
    "type": "boolean",
    "description": "Adds a remove icon to selected chips"
  },
  "v-autocomplete/dense": {
    "type": "boolean",
    "description": "Reduces the input height"
  },
  "v-autocomplete/disable-lookup": {
    "type": "boolean",
    "description": "Disables keyboard lookup"
  },
  "v-autocomplete/disabled": {
    "type": "boolean",
    "description": "Disables the input"
  },
  "v-autocomplete/eager": {
    "type": "boolean",
    "description": "Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
  },
  "v-autocomplete/error": {
    "type": "boolean",
    "description": "Puts the input in a manual error state"
  },
  "v-autocomplete/error-count": {
    "type": "number|string",
    "description": "The total number of errors that should display at once"
  },
  "v-autocomplete/error-messages": {
    "type": "string|array",
    "description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation"
  },
  "v-autocomplete/filled": {
    "type": "boolean",
    "description": "Applies the alternate filled input style"
  },
  "v-autocomplete/filter": {
    "type": "function",
    "description": "The filtering algorithm used when searching. [example](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts#L36)"
  },
  "v-autocomplete/flat": {
    "type": "boolean",
    "description": "Removes elevation (shadow) added to element when using the **solo** or **solo-inverted** props"
  },
  "v-autocomplete/full-width": {
    "type": "boolean",
    "description": "Designates input type as full-width"
  },
  "v-autocomplete/height": {
    "type": "number|string",
    "description": "Sets the height of the input"
  },
  "v-autocomplete/hide-details": {
    "type": "boolean|string",
    "description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display"
  },
  "v-autocomplete/hide-no-data": {
    "type": "boolean",
    "description": "Hides the menu when there are no options to show.  Useful for preventing the menu from opening before results are fetched asynchronously.  Also has the effect of opening the menu when the `items` array changes if not already open."
  },
  "v-autocomplete/hide-selected": {
    "type": "boolean",
    "description": "Do not display in the select menu items that are already selected"
  },
  "v-autocomplete/hint": {
    "type": "string",
    "description": "Hint text"
  },
  "v-autocomplete/id": {
    "type": "string",
    "description": "Sets the DOM id on the component"
  },
  "v-autocomplete/item-color": {
    "type": "string",
    "description": "Sets color of selected items"
  },
  "v-autocomplete/item-disabled": {
    "type": "string|array|function",
    "description": "Set property of **items**'s disabled value"
  },
  "v-autocomplete/item-text": {
    "type": "string|array|function",
    "description": "Set property of **items**'s text value"
  },
  "v-autocomplete/item-value": {
    "type": "string|array|function",
    "description": "Set property of **items**'s value - **must be primitive**. Dot notation is supported. **Note:** This is currently not supported with `v-combobox` [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479)"
  },
  "v-autocomplete/items": {
    "type": "array",
    "description": "Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the **item-text**, **item-value** and **item-disabled** props.  Objects that have a **header** or **divider** property are considered special cases and generate a list header or divider; these items are not selectable."
  },
  "v-autocomplete/label": {
    "type": "string",
    "description": "Sets input label"
  },
  "v-autocomplete/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-autocomplete/loader-height": {
    "type": "number|string",
    "description": "Specifies the height of the loader"
  },
  "v-autocomplete/loading": {
    "type": "boolean|string",
    "description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color"
  },
  "v-autocomplete/menu-props": {
    "type": "string|array|object",
    "description": "Pass props through to the `v-menu` component. Accepts either a string for boolean props `menu-props=\"auto, overflowY\"`, or an object `:menu-props=\"{ auto: true, overflowY: true }\"`"
  },
  "v-autocomplete/messages": {
    "type": "string|array",
    "description": "Displays a list of messages or message if using a string"
  },
  "v-autocomplete/multiple": {
    "type": "boolean",
    "description": "Changes select to multiple. Accepts array for value"
  },
  "v-autocomplete/no-data-text": {
    "type": "string",
    "description": "Display text when there is no data"
  },
  "v-autocomplete/no-filter": {
    "type": "boolean",
    "description": "Do not apply filtering when searching. Useful when data is being filtered server side"
  },
  "v-autocomplete/open-on-clear": {
    "type": "boolean",
    "description": "When using the **clearable** prop, once cleared, the select menu will either open or stay open, depending on the current state"
  },
  "v-autocomplete/outlined": {
    "type": "boolean",
    "description": "Applies the outlined style to the input"
  },
  "v-autocomplete/persistent-hint": {
    "type": "boolean",
    "description": "Forces hint to always be visible"
  },
  "v-autocomplete/placeholder": {
    "type": "string",
    "description": "Sets the input's placeholder text"
  },
  "v-autocomplete/prefix": {
    "type": "string",
    "description": "Displays prefix text"
  },
  "v-autocomplete/prepend-icon": {
    "type": "string",
    "description": "Prepends an icon to the component, uses the same syntax as `v-icon`"
  },
  "v-autocomplete/prepend-inner-icon": {
    "type": "string",
    "description": "Prepends an icon inside the component's input, uses the same syntax as `v-icon`"
  },
  "v-autocomplete/readonly": {
    "type": "boolean",
    "description": "Puts input in readonly state"
  },
  "v-autocomplete/return-object": {
    "type": "boolean",
    "description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**"
  },
  "v-autocomplete/reverse": {
    "type": "boolean",
    "description": "Reverses the input orientation"
  },
  "v-autocomplete/rounded": {
    "type": "boolean",
    "description": "Adds a border radius to the input"
  },
  "v-autocomplete/rules": {
    "type": "array",
    "description": "Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`"
  },
  "v-autocomplete/search-input": {
    "type": "string",
    "description": "Search value. Can be used with `.sync` modifier."
  },
  "v-autocomplete/shaped": {
    "type": "boolean",
    "description": "Round if `outlined` and increase `border-radius` if `filled`. Must be used with either `outlined` or `filled`"
  },
  "v-autocomplete/single-line": {
    "type": "boolean",
    "description": "Label does not move on focus/dirty"
  },
  "v-autocomplete/small-chips": {
    "type": "boolean",
    "description": "Changes display of selections to chips with the **small** property"
  },
  "v-autocomplete/solo": {
    "type": "boolean",
    "description": "Changes the style of the input"
  },
  "v-autocomplete/solo-inverted": {
    "type": "boolean",
    "description": "Reduces element opacity until focused"
  },
  "v-autocomplete/success": {
    "type": "boolean",
    "description": "Puts the input in a manual success state"
  },
  "v-autocomplete/success-messages": {
    "type": "string|array",
    "description": "Puts the input in a success state and passes through custom success messages."
  },
  "v-autocomplete/suffix": {
    "type": "string",
    "description": "Displays suffix text"
  },
  "v-autocomplete/type": {
    "type": "string",
    "description": "Sets input type"
  },
  "v-autocomplete/validate-on-blur": {
    "type": "boolean",
    "description": "Delays validation until blur event"
  },
  "v-autocomplete/value": {
    "type": "any",
    "description": "The input's value"
  },
  "v-autocomplete/value-comparator": {
    "type": "function",
    "description": "The comparison algorithm used for values. [More info](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts)"
  },
  "v-avatar/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-avatar/height": {
    "type": "number|string",
    "description": "Sets the height for the component."
  },
  "v-avatar/left": {
    "type": "boolean",
    "description": "Designates that the avatar is on the left side of a component. This is hooked into by components such as [v-chip](/components/chips) and [v-btn](/components/buttons)."
  },
  "v-avatar/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-avatar/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-avatar/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-avatar/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-avatar/right": {
    "type": "boolean",
    "description": "Designates that the avatar is on the right side of a component. This is hooked into by components such as [v-chip](/components/chips) and [v-btn](/components/buttons)."
  },
  "v-avatar/rounded": {
    "type": "boolean|string",
    "description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
  },
  "v-avatar/size": {
    "type": "number|string",
    "description": "Sets the height and width of the component."
  },
  "v-avatar/tile": {
    "type": "boolean",
    "description": "Removes the component's **border-radius**."
  },
  "v-avatar/width": {
    "type": "number|string",
    "description": "Sets the width for the component."
  },
  "v-badge/avatar": {
    "type": "boolean",
    "description": "Removes badge padding for the use of the `v-avatar` in the **badge** slot."
  },
  "v-badge/bordered": {
    "type": "boolean",
    "description": "Applies a **2px** by default and **1.5px** border around the badge when using the **dot** property."
  },
  "v-badge/bottom": {
    "type": "boolean",
    "description": "Aligns the component towards the bottom."
  },
  "v-badge/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-badge/content": {
    "type": "any",
    "description": "Any content you want injected as text into the badge."
  },
  "v-badge/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-badge/dot": {
    "type": "boolean",
    "description": "Reduce the size of the badge and hide its contents"
  },
  "v-badge/icon": {
    "type": "string",
    "description": "Designates a specific icon used in the badge."
  },
  "v-badge/inline": {
    "type": "boolean",
    "description": "Moves the badge to be inline with the wrapping element. Supports the usage of the **left** prop."
  },
  "v-badge/label": {
    "type": "string",
    "description": "The **aria-label** used for the badge"
  },
  "v-badge/left": {
    "type": "boolean",
    "description": "Aligns the component towards the left."
  },
  "v-badge/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-badge/mode": {
    "type": "string",
    "description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/v2/api/#transition)."
  },
  "v-badge/offset-x": {
    "type": "number|string",
    "description": "Offset the badge on the x-axis."
  },
  "v-badge/offset-y": {
    "type": "number|string",
    "description": "Offset the badge on the y-axis."
  },
  "v-badge/origin": {
    "type": "string",
    "description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)."
  },
  "v-badge/overlap": {
    "type": "boolean",
    "description": "Overlaps the slotted content on top of the component."
  },
  "v-badge/tile": {
    "type": "boolean",
    "description": "Removes the component's border-radius."
  },
  "v-badge/transition": {
    "type": "string",
    "description": "Sets the component transition. Can be one of the [built in transitions](/styles/transitions) or one your own."
  },
  "v-badge/value": {
    "type": "any",
    "description": "Controls whether the component is visible or hidden."
  },
  "v-banner/app": {
    "type": "boolean",
    "description": "When used inside of `v-main`, will calculate top based upon application `v-toolbar` and `v-system-bar`."
  },
  "v-banner/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-banner/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-banner/elevation": {
    "type": "number|string",
    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
  },
  "v-banner/height": {
    "type": "number|string",
    "description": "Sets the height for the component."
  },
  "v-banner/icon": {
    "type": "string",
    "description": "Designates a specific icon."
  },
  "v-banner/icon-color": {
    "type": "string",
    "description": "Designates a specific icon color."
  },
  "v-banner/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-banner/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-banner/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-banner/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-banner/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-banner/mobile-breakpoint": {
    "type": "number|string",
    "description": "Sets the designated mobile breakpoint for the component."
  },
  "v-banner/outlined": {
    "type": "boolean",
    "description": "Removes elevation (box-shadow) and adds a *thin* border."
  },
  "v-banner/rounded": {
    "type": "boolean|string",
    "description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
  },
  "v-banner/shaped": {
    "type": "boolean",
    "description": "Applies a large border radius on the top left and bottom right of the card."
  },
  "v-banner/single-line": {
    "type": "boolean",
    "description": "Forces the banner onto a single line."
  },
  "v-banner/sticky": {
    "type": "boolean",
    "description": "Applies **position: sticky** to the component (**Evergreen browsers only**). You can find more information on the [MDN documentation for sticky position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)."
  },
  "v-banner/tag": {
    "type": "string",
    "description": "Specify a custom tag used on the root element."
  },
  "v-banner/tile": {
    "type": "boolean",
    "description": "Removes the component's **border-radius**."
  },
  "v-banner/value": {
    "type": "boolean",
    "description": "Controls whether the component is visible or hidden."
  },
  "v-banner/width": {
    "type": "number|string",
    "description": "Sets the width for the component."
  },
  "v-bottom-navigation/absolute": {
    "type": "boolean",
    "description": "Applies **position: absolute** to the component."
  },
  "v-bottom-navigation/active-class": {
    "type": "string",
    "description": "The class applied to a [v-btn](/components/buttons) when activated."
  },
  "v-bottom-navigation/app": {
    "type": "boolean",
    "description": "Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside **outside** of `v-main` component to function properly. You can more information about layouts on the [application page](/components/application). **Note:** this prop automatically applies **position: fixed** to the layout element. You can overwrite this functionality by using the `absolute` prop"
  },
  "v-bottom-navigation/background-color": {
    "type": "string",
    "description": "Changes the background-color for the component."
  },
  "v-bottom-navigation/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-bottom-navigation/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-bottom-navigation/fixed": {
    "type": "boolean",
    "description": "Applies **position: fixed** to the component."
  },
  "v-bottom-navigation/grow": {
    "type": "boolean",
    "description": "Force [v-btn](/components/buttons)s to take up all available space."
  },
  "v-bottom-navigation/height": {
    "type": "number|string",
    "description": "Sets the height for the component."
  },
  "v-bottom-navigation/hide-on-scroll": {
    "type": "boolean",
    "description": "Will transition the navigation off screen when scrolling up."
  },
  "v-bottom-navigation/horizontal": {
    "type": "boolean",
    "description": "Uses an alternative horizontal styling for [v-btn](/components/buttons)."
  },
  "v-bottom-navigation/input-value": {
    "type": "boolean",
    "description": "Controls whether the component is visible or hidden. Supports the **.sync** modifier."
  },
  "v-bottom-navigation/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-bottom-navigation/mandatory": {
    "type": "boolean",
    "description": "Forces a value to always be selected (if available)."
  },
  "v-bottom-navigation/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-bottom-navigation/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-bottom-navigation/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-bottom-navigation/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-bottom-navigation/scroll-target": {
    "type": "string",
    "description": "Designates the element to target for scrolling events. Uses `window` by default."
  },
  "v-bottom-navigation/scroll-threshold": {
    "type": "string|number",
    "description": "The amount of scroll distance down before **hide-on-scroll** activates."
  },
  "v-bottom-navigation/shift": {
    "type": "boolean",
    "description": "Hides text of [v-btn](/components/buttons)s when they are not active."
  },
  "v-bottom-navigation/value": {
    "type": "any",
    "description": "Holds the value of the currently active [v-btn](/components/buttons). If the button has no value supplied, its index will be used instead.."
  },
  "v-bottom-navigation/width": {
    "type": "number|string",
    "description": "Sets the width for the component."
  },
  "v-bottom-sheet/activator": {
    "type": "any",
    "description": "Designate a custom activator when the `activator` slot is not used. String can be any valid querySelector and Object can be any valid Node."
  },
  "v-bottom-sheet/attach": {
    "type": "any",
    "description": "Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root `v-app` component by default."
  },
  "v-bottom-sheet/close-delay": {
    "type": "number|string",
    "description": "Milliseconds to wait before closing component."
  },
  "v-bottom-sheet/content-class": {
    "type": "string",
    "description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component."
  },
  "v-bottom-sheet/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-bottom-sheet/disabled": {
    "type": "boolean",
    "description": "Disables the ability to open the component."
  },
  "v-bottom-sheet/eager": {
    "type": "boolean",
    "description": "Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO."
  },
  "v-bottom-sheet/fullscreen": {
    "type": "boolean",
    "description": "Changes layout for fullscreen display."
  },
  "v-bottom-sheet/hide-overlay": {
    "type": "boolean",
    "description": "Hides the display of the overlay."
  },
  "v-bottom-sheet/inset": {
    "type": "boolean",
    "description": "Reduces the sheet content maximum width to 70%."
  },
  "v-bottom-sheet/internal-activator": {
    "type": "boolean",
    "description": "Detaches the menu content inside of the component as opposed to the document."
  },
  "v-bottom-sheet/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-bottom-sheet/max-width": {
    "type": "string|number",
    "description": "Sets the maximum width for the component."
  },
  "v-bottom-sheet/no-click-animation": {
    "type": "boolean",
    "description": "Disables the bounce effect when clicking outside of a `v-dialog`'s content when using the **persistent** prop."
  },
  "v-bottom-sheet/open-delay": {
    "type": "number|string",
    "description": "Milliseconds to wait before opening component."
  },
  "v-bottom-sheet/open-on-focus": {
    "type": "boolean",
    "description": ""
  },
  "v-bottom-sheet/open-on-hover": {
    "type": "boolean",
    "description": "Designates whether component should activate when its activator is hovered."
  },
  "v-bottom-sheet/origin": {
    "type": "string",
    "description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)."
  },
  "v-bottom-sheet/overlay-color": {
    "type": "string",
    "description": "Sets the overlay color."
  },
  "v-bottom-sheet/overlay-opacity": {
    "type": "number|string",
    "description": "Sets the overlay opacity."
  },
  "v-bottom-sheet/persistent": {
    "type": "boolean",
    "description": "Clicking outside of the element will not deactivate it."
  },
  "v-bottom-sheet/retain-focus": {
    "type": "boolean",
    "description": "Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard."
  },
  "v-bottom-sheet/return-value": {
    "type": "any",
    "description": ""
  },
  "v-bottom-sheet/scrollable": {
    "type": "boolean",
    "description": "When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the [scrollable example](/components/dialogs#scrollable)."
  },
  "v-bottom-sheet/transition": {
    "type": "string",
    "description": "Sets the component transition. Can be one of the [built in transitions](/styles/transitions) or one your own."
  },
  "v-bottom-sheet/value": {
    "type": "any",
    "description": "Controls whether the component is visible or hidden."
  },
  "v-bottom-sheet/width": {
    "type": "string|number",
    "description": "Sets the width for the component."
  },
  "v-breadcrumbs/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-breadcrumbs/divider": {
    "type": "string",
    "description": "Specifies the dividing character between items."
  },
  "v-breadcrumbs/items": {
    "type": "array",
    "description": "An array of objects for each breadcrumb."
  },
  "v-breadcrumbs/large": {
    "type": "boolean",
    "description": "Increase the font-size of the breadcrumb item text to 16px (14px default)."
  },
  "v-breadcrumbs/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-breadcrumbs-item/active-class": {
    "type": "string",
    "description": "Configure the active CSS class applied when the link is active. You can find more information about the [**active-class** prop](https://router.vuejs.org/api/#active-class) on the vue-router documentation."
  },
  "v-breadcrumbs-item/append": {
    "type": "boolean",
    "description": "Setting **append** prop always appends the relative path to the current path. You can find more information about the [**append** prop](https://router.vuejs.org/api/#append) on the vue-router documentation."
  },
  "v-breadcrumbs-item/disabled": {
    "type": "boolean",
    "description": "Removes the ability to click or target the component."
  },
  "v-breadcrumbs-item/exact": {
    "type": "boolean",
    "description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
  },
  "v-breadcrumbs-item/exact-active-class": {
    "type": "string",
    "description": "Configure the active CSS class applied when the link is active with exact match. You can find more information about the [**exact-active-class** prop](https://router.vuejs.org/api/#exact-active-class) on the vue-router documentation."
  },
  "v-breadcrumbs-item/href": {
    "type": "string|object",
    "description": "Designates the component as anchor and applies the **href** attribute."
  },
  "v-breadcrumbs-item/link": {
    "type": "boolean",
    "description": "Designates that the component is a link. This is automatic when using the **href** or **to** prop."
  },
  "v-breadcrumbs-item/nuxt": {
    "type": "boolean",
    "description": "Specifies the link is a `nuxt-link`. For use with the [nuxt framework](https://nuxtjs.org/api/components-nuxt-link/)."
  },
  "v-breadcrumbs-item/replace": {
    "type": "boolean",
    "description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [**replace** prop](https://router.vuejs.org/api/#replace) on the vue-router documentation."
  },
  "v-breadcrumbs-item/ripple": {
    "type": "boolean|object",
    "description": "Applies the [v-ripple](/directives/ripple) directive."
  },
  "v-breadcrumbs-item/tag": {
    "type": "string",
    "description": "Specify a custom tag used on the root element."
  },
  "v-breadcrumbs-item/target": {
    "type": "string",
    "description": "Designates the target attribute. This should only be applied when using the **href** prop."
  },
  "v-breadcrumbs-item/to": {
    "type": "string|object",
    "description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation."
  },
  "v-btn/absolute": {
    "type": "boolean",
    "description": "Applies **position: absolute** to the component."
  },
  "v-btn/active-class": {
    "type": "string",
    "description": "Configure the active CSS class applied when the link is active. You can find more information about the [**active-class** prop](https://router.vuejs.org/api/#active-class) on the vue-router documentation."
  },
  "v-btn/append": {
    "type": "boolean",
    "description": "Setting **append** prop always appends the relative path to the current path. You can find more information about the [**append** prop](https://router.vuejs.org/api/#append) on the vue-router documentation."
  },
  "v-btn/block": {
    "type": "boolean",
    "description": "Expands the button to 100% of available space."
  },
  "v-btn/bottom": {
    "type": "boolean",
    "description": "Aligns the component towards the bottom."
  },
  "v-btn/color": {
    "type": "string",
    "description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors)."
  },
  "v-btn/dark": {
    "type": "boolean",
    "description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html)."
  },
  "v-btn/depressed": {
    "type": "boolean",
    "description": "Removes the button box shadow."
  },
  "v-btn/disabled": {
    "type": "boolean",
    "description": "Removes the ability to click or target the component."
  },
  "v-btn/elevation": {
    "type": "number|string",
    "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)."
  },
  "v-btn/exact": {
    "type": "boolean",
    "description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation."
  },
  "v-btn/exact-active-class": {
    "type": "string",
    "description": "Configure the active CSS class applied when the link is active with exact match. You can find more information about the [**exact-active-class** prop](https://router.vuejs.org/api/#exact-active-class) on the vue-router documentation."
  },
  "v-btn/fab": {
    "type": "boolean",
    "description": "Designates the button as a floating-action-button - _round_."
  },
  "v-btn/fixed": {
    "type": "boolean",
    "description": "Applies **position: fixed** to the component."
  },
  "v-btn/height": {
    "type": "number|string",
    "description": "Sets the height for the component."
  },
  "v-btn/href": {
    "type": "string|object",
    "description": "Designates the component as anchor and applies the **href** attribute."
  },
  "v-btn/icon": {
    "type": "boolean",
    "description": "Designates the button as icon - _round and flat_"
  },
  "v-btn/input-value": {
    "type": "any",
    "description": "Controls the button's active state."
  },
  "v-btn/large": {
    "type": "boolean",
    "description": "Makes the component large."
  },
  "v-btn/left": {
    "type": "boolean",
    "description": "Aligns the component towards the left. This should be used with the **absolute** or **fixed** props."
  },
  "v-btn/light": {
    "type": "boolean",
    "description": "Applies the light theme variant to the component."
  },
  "v-btn/link": {
    "type": "boolean",
    "description": "Designates that the component is a link. This is automatic when using the **href** or **to** prop."
  },
  "v-btn/loading": {
    "type": "boolean",
    "description": "Adds a loading icon animation"
  },
  "v-btn/max-height": {
    "type": "number|string",
    "description": "Sets the maximum height for the component."
  },
  "v-btn/max-width": {
    "type": "number|string",
    "description": "Sets the maximum width for the component."
  },
  "v-btn/min-height": {
    "type": "number|string",
    "description": "Sets the minimum height for the component."
  },
  "v-btn/min-width": {
    "type": "number|string",
    "description": "Sets the minimum width for the component."
  },
  "v-btn/nuxt": {
    "type": "boolean",
    "description": "Specifies the link is a `nuxt-link`. For use with the [nuxt framework](https://nuxtjs.org/api/components-nuxt-link/)."
  },
  "v-btn/outlined": {
    "type": "boolean",
    "description": "Makes the background transparent and applies a thin border."
  },
  "v-btn/replace": {
    "type": "boolean",
    "description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [**replace** prop](https://router.vuejs.org/api/#replace) on the vue-router documentation."
  },
  "v-btn/retain-focus-on-click": {
    "type": "boolean",
    "description": "Don't blur on click."
  },
  "v-btn/right": {
    "type": "boolean",
    "description": "Aligns the component towards the right. This should be used with the **absolute** or **fixed** props."
  },
  "v-btn/ripple": {
    "type": "boolean|object",
    "description": "Applies the [v-ripple](/directives/ripple) directive."