packages/docs/src/pages/en/components/icon-buttons.md
The v-icon-btn component is a lightweight button component for iconography.
Labs components require manual import and registration with the Vuetify instance.
import { VIconBtn } from 'vuetify/labs/VIconBtn'
export default createVuetify({
components: {
VIconBtn,
},
})
| Component | Description |
|---|---|
| v-icon-btn | Primary Component |
The recommended placement of elements inside of v-icon-btn is:
| Element / Area | Description |
|---|---|
| 1. Container | The container element that holds the icon and text |
The v-icon-btn component is a lightweight reusable button that displays icons and text in various states.
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>
The v-icon-btn supports various stylistic props to customize the appearance of the button and its icon.
The active prop is used to control the active state of the button and should be used in conjunction with the active-color prop.
<ExamplesExample file="v-icon-btn/prop-active" />The opacity prop is used to control the opacity of the internal icon.
<ExamplesExample file="v-icon-btn/prop-opacity" />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.
<ExamplesExample file="v-icon-btn/prop-rotate" />The following are a collection of examples that demonstrate more advanced and real world use of the v-icon-btn component.
The v-icon-btn component is perfect for closing dialogs or other components.
The following example demonstrates how flexible the v-icon-btn component is by replicating the Google Meet video controls.
The following example is a simple markdown editor that demonstrates how to use the v-icon-btn component to create a toolbar.
The v-icon-btn component is perfect for datatable actions.