BlogPlaygroundOne

VAppBarNavIcon API

ads via vuetify

Props
name
type
default
active
boolean

undefined

Controls the active state of the item. This is typically used to highlight the component.

active-color
string

undefined

The applied color when the component is in an active state.

append-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Creates a v-icon component after default content in the append slot.

base-color
string

undefined

Sets the color of component when not focused.

block
boolean

false

Expands the button to 100% of available space.

border
string | number | boolean

false

Applies utility border classes to the component. To use it, you need to omit the border- prefix, (for example use border-sm as border="sm"). Find a list of the built-in border classes on the borders 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.

density
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

disabled
boolean

false

Removes the ability to click or target 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.

exact
boolean

false

Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.

flat
boolean

false

Removes the button box shadow. This is different than using the ‘flat’ variant.

height
string | number

undefined

Sets the height for the component.

href
string

undefined

Designates the component as anchor and applies the href attribute.

icon
  | boolean
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$menu'

Apply a specific icon using the v-icon component. The button will become round.

loading
string | boolean

false

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.

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.

position
'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'

undefined

Sets the position for the component.

prepend-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Creates a v-icon component in the prepend slot before default content.

readonly
boolean

false

Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.

replace
boolean

false

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 on the vue-router documentation.

ripple
boolean | { class: string; keys: string[] }

true

Applies the v-ripple directive.

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.

selected-class
string

undefined

Configure the active CSS class applied when an item is selected.

size
string | number

'default'

Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.

slim
boolean

false

Reduces padding to 0 8px.

stacked
boolean

false

Displays the button as a flex-column.

symbol
any

undefined

The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation.

tag
string | (new () => any) | FunctionalComponent

'button'

Specify a custom tag used on the root element.

text
string | number | boolean

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 any applied border-radius from the component.

to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

undefined

Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.

value
any

undefined

The value used when the component is selected in a group. If not provided, a unique ID will be used.

variant
'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'

'text'

Applies a distinct style to the component.

width
string | number

undefined

Sets the width for the component.

Slots
never
never
never
never
append

Adds an item inside the input and after input content.

default

The default Vue slot.

loader

Slot for custom loader (displayed when loading prop is equal to true).

prepend

Adds an item outside the input and before input content.