BlogPlaygroundOne

VIconBtn API

ads via vuetify

Props
name
type
default
active
boolean

undefined

When undefined (default), the component utilizes its default variant, otherwise it will use the activeVariant if active is true, or the baseVariant if active is false.

active-color
string

undefined

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

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

undefined

When active is a boolean, this icon is used when active is true.

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

undefined

When active is a boolean, this variant is used when active is true.

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

'tonal'

When active is a boolean, this variant is used when active is false.

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.

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.

height
string | number

undefined

Sets the height for the component.

hide-overlay
boolean

false

Hides overlay from being displayed when active or focused.

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

undefined

Apply a specific icon using the v-icon component.

icon-color
string

undefined

Explicit color applied to the icon.

icon-size
string | number

undefined

The specific size of the icon, can use named sizes.

icon-sizes
['small' | 'default' | '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.

loading
boolean

false

Displays circular progress bar in place of the icon.

opacity
string | number

undefined

Sets the component’s opacity value

readonly
boolean

false

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

rotate
string | number

undefined

The rotation of the icon in degrees.

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.

size
string | number

'default'

Sets the height and width of the component.

sizes
['small' | 'default' | 'x-small' | 'large' | 'x-large', number][]

[
  ['x-small', 16],
  ['small', 24],
  ['default', 40],
  ['large', 48],
  ['x-large', 56]
]

An array of tuples that define the button sizes for each named size.

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.

variant
'flat' | 'text' | '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
update:active
[boolean]

Event that is emitted when the active state changes.

Slots
never
never
default

The default Vue slot.

loader

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