Skip to main content

​
Icon Button

This is a Labs component. The API may change in future releases. Import from vuetify/labs/VIconBtn.
The VIconBtn component is an improved icon button with additional features like active states, custom variants, and enhanced sizing.

​
Usage

<template>
  <v-icon-btn icon="mdi-heart" />
</template>

<script setup>
import { VIconBtn } from 'vuetify/labs/VIconBtn'
</script>

​
API

​
Props

​
icon
string | Component
The icon to display.
​
active
boolean
Controls the active state for toggle buttons.
​
activeIcon
string | Component
Icon displayed when the button is active.
​
activeColor
string
Color applied when the button is active.
​
activeVariant
string
Variant applied when the button is active.
​
baseVariant
string
default:"tonal"
Variant applied when the button is not active.
​
size
string | number
default:"default"
Size of the button. Options: x-small, small, default, large, x-large, or a number.
​
disabled
boolean
default:"false"
Disables the button.
​
loading
boolean | string
default:"false"
Displays a loading indicator. Pass a color string to customize.
​
readonly
boolean
default:"false"
Makes the button read-only.
​
hideOverlay
boolean
default:"false"
Hides the ripple overlay effect.
​
iconColor
string
Color applied to the icon.
​
opacity
number | string
Opacity of the icon.
​
rotate
number | string
Rotation angle for the icon in degrees.
​
text
string | number | boolean
Text displayed instead of or with the icon.
​
variant
string
default:"flat"
Button variant. Options: flat, elevated, tonal, outlined, text, plain.

​
Events

​
update:active
(value: boolean) => void
Emitted when the active state changes (for toggle buttons).

​
Slots

​
default
Default content displayed in the button.
​
loader
Customize the loading indicator.

​
Examples

​
Toggle Button

<template>
  <v-icon-btn
    v-model:active="favorite"
    icon="mdi-heart-outline"
    active-icon="mdi-heart"
    active-color="red"
  />
</template>

<script setup>
import { ref } from 'vue'
import { VIconBtn } from 'vuetify/labs/VIconBtn'

const favorite = ref(false)
</script>

​
Different Sizes

<template>
  <div class="d-flex ga-2">
    <v-icon-btn icon="mdi-plus" size="x-small" />
    <v-icon-btn icon="mdi-plus" size="small" />
    <v-icon-btn icon="mdi-plus" size="default" />
    <v-icon-btn icon="mdi-plus" size="large" />
    <v-icon-btn icon="mdi-plus" size="x-large" />
  </div>
</template>

​
Loading State

<template>
  <v-icon-btn
    icon="mdi-cloud-upload"
    loading
    color="primary"
  />
</template>

​
Variants

<template>
  <div class="d-flex ga-2">
    <v-icon-btn icon="mdi-delete" variant="flat" color="error" />
    <v-icon-btn icon="mdi-delete" variant="elevated" color="error" />
    <v-icon-btn icon="mdi-delete" variant="tonal" color="error" />
    <v-icon-btn icon="mdi-delete" variant="outlined" color="error" />
    <v-icon-btn icon="mdi-delete" variant="text" color="error" />
  </div>
</template>

​
Rotated Icon

<template>
  <v-icon-btn
    icon="mdi-refresh"
    :rotate="rotation"
    @click="rotation += 90"
  />
</template>

<script setup>
import { ref } from 'vue'
import { VIconBtn } from 'vuetify/labs/VIconBtn'

const rotation = ref(0)
</script>

​
With Text

<template>
  <v-icon-btn icon="mdi-account" text="JD" />
</template>

​
Disabled State

<template>
  <v-icon-btn
    icon="mdi-lock"
    disabled
  />
</template>

​
Custom Loading Indicator

<template>
  <v-icon-btn icon="mdi-refresh" :loading="loading">
    <template #loader>
      <v-progress-circular
        indeterminate
        color="primary"
        size="20"
      />
    </template>
  </v-icon-btn>
</template>

<script setup>
import { ref } from 'vue'
import { VIconBtn } from 'vuetify/labs/VIconBtn'

const loading = ref(true)
</script>

​
Active Variant

<template>
  <v-icon-btn
    v-model:active="active"
    icon="mdi-star-outline"
    active-icon="mdi-star"
    base-variant="outlined"
    active-variant="flat"
    active-color="warning"
  />
</template>

<script setup>
import { ref } from 'vue'
import { VIconBtn } from 'vuetify/labs/VIconBtn'

const active = ref(false)
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us