Vuetify Swatches


!demo

⚠ Version 2.x Breaking Changes: This version includes significant architectural changes.

⚠ This is for Vuetify3. If you are using Vuetify2, please use 1.0.x.

This project is a remake of saintplay's vue-swatches with Vuetify.

Unlike the original version, it provides a UI based on Vuetify, such as ripple effects and dark mode.

This library is positioned as a complement to Vuetify and provides a minimal UI. Use theMenu Component if you want to display a pop-up menu, and the Card component if you want to display a palette.

Usage

Note: In v2.x, the component requires a swatches prop to display colors. You can either provide your own color array or use the preset palettes.

$3

You can import pre-defined color palettes separately. This keeps your bundle size small by only importing what you need:

``vue



`

Props

Most props other than size and placement are the same as v-btn.

| Variables | Type | Default | Info |
| ---------------- | -------------- | -------------------------- | -------------------------------------------------------------------------- |
| size | string | 2rem | Swatch Button size |
| icon | string | mdi-checkbox-marked-circle | checked icon |
| icon-size | string | 1rem | checked icon size |
| disabled | boolean | false | Removes the ability to click or target the component. |
| rounded | number\|string | undefined | Applies a large border radius on the button. |
| variant | Variant [^1] | undefined | The variant prop gives you easy access to several different button styles. |
| elevation | number\|string | undefined | |
| border | number\|string | undefined | |
| transpose | boolean | false | Swaps the rows and columns of swatches. |
| tooltip | boolean | false | Display color value in tooltip. |
| tooltip-location | Anchor [^2] | undefined | Tooltip location. |

[^1]:

[^2]:

Example

For more details, see the demo page.

$3

Display the color code in a tooltip when you hover over the swatch.

`vue



`

$3

You can also provide your own custom color palette. The method of specifying swatches is the same as nested-color of Vue Swatches.

`vue



`

$3

If you want to make the color palette appear when you click it, combine it with VMenu:

`vue



`

$3

`html



rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vuetify@3.11.0/dist/vuetify.min.js"
/>



``

LICENSE

©2022-2025 by Logue. Licensed under the MIT License.