#Icon Buttons
The v-icon-btn component is a lightweight button component for iconography.
#Installation
Labs components require manual import and registration with the Vuetify instance.
import { VIconBtn } from 'vuetify/labs/VIconBtn'
export default createVuetify({
components: {
VIconBtn,
},
})
#Usage
#API
| Component | Description |
|---|---|
| v-icon-btn | Primary Component |
#Anatomy
The recommended placement of elements inside of v-icon-btn is:
- Place icon or text in the center
| Element / Area | Description |
|---|---|
| 1. Container | The container element that holds the icon and text |
#Guide
The v-icon-btn component is a lightweight reusable button that displays icons and text in various states.
#Using with vue-router
The v-icon-btn component does not have built in support for vue-router. The following example demonstrates how to use the v-icon-btn component with the router-link component:
<template>
<RouterLink v-slot="{ navigate, isActive }" to="/page1" custom>
<v-icon-btn
:active="isActive"
color="primary"
icon="$vuetify"
tag="a"
@click="navigate"
/>
</RouterLink>
</template>
#Props
The v-icon-btn supports various stylistic props to customize the appearance of the button and its icon.
#Active
The active prop is used to control the active state of the button and should be used in conjunction with the active-color prop.
#Opacity
The opacity prop is used to control the opacity of the internal icon.
#Rotate
The rotate prop is used to control the rotation of the internal icon. This is useful when creating dropdowns or other components that need to toggle visibility.
#Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-icon-btn component.
#Dialog
The v-icon-btn component is perfect for closing dialogs or other components.
#Video controls
The following example demonstrates how flexible the v-icon-btn component is by replicating the Google Meet video controls.
#Markdown editor
The following example is a simple markdown editor that demonstrates how to use the v-icon-btn component to create a toolbar.
#Datatable actions
The v-icon-btn component is perfect for datatable actions.
Title | Color | Actions |
|---|---|---|
| 🌹 Rose | Red | |
| 🌷 Tulip | Yellow | |
| 🌻 Sunflower | Yellow | |
| 🌼 Daisy | White | |
| 🥀 Orchid | Purple |