ColorPicker

Swatch picker for choosing a color from presets. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiColorPicker } from '@ziyarago/ui/vue'

Default presets

Tag color
Vue
<UiColorPicker label="Tag color" v-model="value" />

Custom presets

Brand color
Vue
<UiColorPicker
  label="Brand color"
  :presets="['#0F766E', '#1D4ED8', '#B91C1C', '#CA8A04', '#4B5563']"
  v-model="value"
 />

Sizes

Tag color
Tag color
Tag color
Tag color
Tag color
Vue
<UiColorPicker size="xs" label="Tag color" v-model="value" />

<UiColorPicker size="sm" label="Tag color" v-model="value" />

<UiColorPicker size="md" label="Tag color" v-model="value" />

<UiColorPicker size="lg" label="Tag color" v-model="value" />

<UiColorPicker size="xl" label="Tag color" v-model="value" />

API reference

Swatch row for choosing a color from presets. Use for tags, labels and theme accents.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring—Selected color, same string as in presets.
presetsstring[]'['#BC926A', '#5FAACC', '#3FD13F', '#E26E5F', '#E8B964', '#A98BD6', '#1B1919']'CSS colors offered as swatches.
labelstring—Label shown above the control.
sizexssmmdlgxl'md'Swatch size.

Events

Vue: @name. React: onName.

changeCalled with the clicked color string.

Notes

  • Preset-only: there is no free color input.