如何在Vuetify中禁用v-btn-toggle的选中效果？

你遇到的变灰问题是因为v-btn-toggle默认会给点击的按钮添加激活（active）状态样式，同时按钮本身的:active/:focus伪类也会产生视觉变化。可以通过以下方式解决：

方法一：禁用选中状态并覆盖样式 #

1. 修改模板，阻止选中行为 #

给v-btn-toggle绑定固定空值，阻止选中状态更新，同时给按钮添加disable-ripple去掉点击波纹：

<v-btn-toggle
    class="custom-toggle-btn"
    divided
    variant="outlined"
    :model-value="null"
    @update:model-value="() => {}"
>
    <v-btn                                      
        icon
        @click="handleDeleteButtonClick"
        class="custom-toggle-btn-icon"
        disable-ripple
    >
        <v-icon size="small" class="custom-toggle-btn-icon-icon">mdi-delete</v-icon>
    </v-btn>
    <v-btn
        @click="handleDeleteButtonClick"
        class="custom-toggle-btn-text"
        disable-ripple
    >
        <h4>Ignore</h4>
    </v-btn>
</v-btn-toggle>

2. 补充样式覆盖激活/点击状态 #

修正原样式的语法错误，并添加代码移除激活状态的灰色背景：

.custom-toggle-btn { 
    border: 1px solid white; /* 修正原border语法缺失的solid关键字 */
    border-radius:5%;
}

/* 移除按钮激活、点击、聚焦时的背景变化 */
.custom-toggle-btn .v-btn--active,
.custom-toggle-btn .v-btn:active,
.custom-toggle-btn .v-btn:focus {
    background-color: inherit !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* 保留原有的自定义样式 */
.custom-toggle-btn-icon {
    background-color: #22223b;
    color: #E7ECEF;
}

.custom-toggle-btn-text {
    background-color: #274C77;
    color: #E7ECEF;
}
.custom-toggle-btn:hover .custom-toggle-btn-icon {
    background-color: #274C77;
    color: #E7ECEF;
}

.custom-toggle-btn:hover .custom-toggle-btn-text {
    background-color: #22223b;
    color: #E7ECEF;
}

方法二：改用普通按钮组（更简洁） #

如果只是需要两个按钮并排布局，直接用flex容器包裹v-btn即可，完全避开v-btn-toggle的默认选中逻辑：

<div style="display:flex; border-radius:5%; overflow:hidden;">
    <v-btn                                      
        icon
        @click="handleDeleteButtonClick"
        class="custom-toggle-btn-icon"
        disable-ripple
    >
        <v-icon size="small" class="custom-toggle-btn-icon-icon">mdi-delete</v-icon>
    </v-btn>
    <v-btn
        @click="handleDeleteButtonClick"
        class="custom-toggle-btn-text"
        disable-ripple
    >
        <h4>Ignore</h4>
    </v-btn>
</div>

样式可直接沿用你原有的配置，无需额外调整。

内容的提问来源于stack exchange，提问作者Achraf Baya Chatti