color

primaryやsecondaryなどの色を指定できます。

ボタンの色を変更できますボタンの色を変更できます

primary

template

<template>
    <v-container>
        <v-row>
            <v-col cols="6">
                <v-select
                    class="mt-2"
                    v-model="selected"
                    :items="color"
                    label="ボタンの色を変更できます"
                    outlined
                ></v-select>
            </v-col>
            <v-col cols="6">
                <v-btn
                    class="mt-5"
                    :color="selected"
                >Button</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const color = ref([
    'primary',
    'secondary',
    'success',
    'info',
    'warning',
    'error',
])

const selected = ref('primary')
</script>

rgba(r, g, b, opacity)で色の指定や透過度を指定できます。

R

0

G

0

B

0

Opacity

1.0

R: 0 G: 0 B: 0 Opacity: 1

template

<template>
    <v-slider
        v-model="r"
        label="R"
        min="0"
        max="255"
        step="1"
    ></v-slider>
    <v-slider
        v-model="g"
        label="G"
        min="0"
        max="255"
        step="1"
    ></v-slider>
    <v-slider
        v-model="b"
        label="B"
        min="0"
        max="255"
        step="1"
    ></v-slider>
    <v-slider
        v-model="opacity"
        label="Opacity"
        min="0"
        max="1"
        step="0.1"
    ></v-slider>
    <div class="my-2">R: {{r}} G: {{ g }} B: {{ b }} Opacity: {{ opacity }}</div>
    <v-btn :color="`rgba(${r}, ${g}, ${b}, ${opacity})`">Button</v-btn>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const r = ref(0)
const g = ref(0)
const b = ref(0)
const opacity = ref(1)
</script>

variant

variant でボタンの形状を指定できます。
textやoutlinedなどがあります。

variantを変更できますvariantを変更できます

text

template

<template>
    <v-container>
        <v-row>
            <v-col cols="6">
                <v-select
                    class="mt-2"
                    v-model="selected"
                    :items="variant"
                    label="variantを変更できます"
                    outlined
                ></v-select>
            </v-col>
            <v-col cols="6">
                <v-btn
                    class="mt-5"
                    :variant="selected"
                    color="primary"
                >
                    Button
                </v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const variant = ref([
    'elevated',
    'flat',
    'tonal',
    'outlined',
    'text',
    'plain',
])

const selected = ref('text')
</script>

icon

icon プロパティを使ってアイコンの種類を指定できます。

アイコンを変更できますアイコンを変更できます

home

template

<template>
    <v-container>
        <v-row>
            <v-col cols="6">
                <v-select
                    class="mt-2"
                    v-model="selected"
                    :items="icon"
                    label="アイコンを変更できます"
                    outlined
                ></v-select>
            </v-col>
            <v-col cols="6">
                <v-btn
                    class="mt-3"
                    :icon="mdiIcon[selected]"
                    color="primary"
                />
            </v-col>
        </v-row>
    </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';
import {mdiHome, mdiMagnify, mdiMenu, mdiPlus, mdiFileDocument, mdiAccount}from '@mdi/js';

const icon = ref([
    'home',
    'magnify',
    'menu',
    'plus',
    'file-document',
    'account',
])

const mdiIcon = {
    home: mdiHome,
    magnify: mdiMagnify,
    menu: mdiMenu,
    plus: mdiPlus,
    'file-document': mdiFileDocument,
    account: mdiAccount,
}

const selected = ref('home')
</script>

disabled

ボタンの disabled を設定することで、ボタンの見た目やクリック制御ができます。

ボタンのdisabledを切り替えます

template

<template>
    <v-container>
        <v-row>
            <v-col cols="6">
                <v-switch
                    class="mt-2"
                    v-model="isSwitch"
                    label="ボタンのdisabledを切り替えます"
                    color="primary"
                ></v-switch>
            </v-col>
            <v-col cols="6">
                <v-btn
                    class="mt-5"
                    color="primary"
                    :disabled="isSwitch"
                    @click="onClick"
                >
                    {{ isSwitch ? 'Disabled' : 'Avaialbe' }}
                </v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'

const isSwitch = ref(false)

const onClick = () => {
    alert('You can click!')
}
</script>

slot

slot を使用すると props より柔軟な設定ができます。
サンプルでは前後にアイコンを slot で設定しています。

前アイコンと後アイコンの色やクリックイベントを設定することができます。

サンプルではボタンのクリックイベントとアイコンのクリックイベントを別々に設定しているので、クリックの場所によって処理を分けることが可能です。

試しにアイコンとボタンをクリックしてください！

アイコンを変更できますアイコンを変更できます

home

template

<template>
    <v-container>
        <v-row>
            <v-col cols="6">
                <v-select
                    class="mt-2"
                    v-model="selected"
                    :items="icon"
                    label="アイコンを変更できます"
                    outlined
                ></v-select>
            </v-col>
            <v-col cols="6">
                <v-btn
                    class="mt-5"
                    color="primary"
                    @click="onClick"
                >
                    <template #prepend>
                        <v-icon
                            color="black"
                            @click.stop="onClickPrepend"
                        >{{mdiIcon[selected]}}</v-icon>
                    </template>
                    <template #default>
                        Button
                    </template>
                    <template #append>
                        <v-icon
                            color="red"
                            @click.stop="onClickAppend"
                        >{{mdiIcon[selected]}}</v-icon>
                    </template>
                </v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

script

<script setup lang="ts">
import { ref } from 'vue'
import {mdiHome, mdiMagnify, mdiMenu, mdiPlus, mdiFileDocument, mdiAccount}from '@mdi/js';

const icon = ref([
    'home',
    'magnify',
    'menu',
    'plus',
    'file-document',
    'account',
])

const mdiIcon = {
    home: mdiHome,
    magnify: mdiMagnify,
    menu: mdiMenu,
    plus: mdiPlus,
    'file-document': mdiFileDocument,
    account: mdiAccount,
}

const selected = ref('home')

const onClick = () => {
    alert('onClick')
}

const onClickPrepend = (event) => {
    alert('onClickPrepend')
    // event.stopPropagation()
}

const onClickAppend = (event) => {
    alert('onClickAppend')
    // event.stopPropagation()
}
</script>

INFO

アイコンのクリックイベントを@click.stopとしています。
これはアイコンをクリックするとボタンのクリックイベントも発生（イベントの伝播）を止めるためのもので、event.stopPropagation()を指定しているのと同じです。