Preview Updated 2026-05-10

ColorSwatch

A single color sample, commonly used inside palettes — supports a selected ring and an "add" button variant.

Basic usage

Any CSS color (including tokens like var(--accent-1)). selected shows a selection ring; add switches to a dashed + plus-icon placeholder.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorSwatch } from '@chufix-design/vue';
const picked = ref('var(--accent-1)');
const colors = ['var(--accent-1)', 'var(--status-success)', 'var(--status-warning)', 'var(--status-error)', 'var(--proto-ws)', 'var(--proto-gql)'];
</script>
<template>
  <div class="demo-row">
    <CfColorSwatch
      v-for="c in colors"
      :key="c"
      :color="c"
      :selected="picked === c"
      :label="c"
      @click="picked = c"
    />
    <CfColorSwatch add label="添加颜色" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfColorSwatch } from '@chufix-design/vue';
const picked = ref('var(--accent-1)');
const colors = ['var(--accent-1)', 'var(--status-success)', 'var(--status-warning)', 'var(--status-error)', 'var(--proto-ws)', 'var(--proto-gql)'];
</script>
<template>
  <div class="demo-row">
    <CfColorSwatch
      v-for="c in colors"
      :key="c"
      :color="c"
      :selected="picked === c"
      :label="c"
      @click="picked = c"
    />
    <CfColorSwatch add label="添加颜色" />
  </div>
</template>

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch color="var(--accent-1)" selected />
      <CfColorSwatch color="var(--status-success)" />
      <CfColorSwatch color="#dc3545" />
      <CfColorSwatch add label="Add color" />
    </>
  );
}

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch color="var(--accent-1)" selected />
      <CfColorSwatch color="var(--status-success)" />
      <CfColorSwatch color="#dc3545" />
      <CfColorSwatch add label="Add color" />
    </>
  );
}

Size / shape / state

3 sizes, square / round shapes, with selectable and disabled states.

背景

src/App.vue

<script setup lang="ts">
import { CfColorSwatch } from '@chufix-design/vue';
const c = 'var(--accent-1)';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 16px;">
    <CfColorSwatch size="sm" :color="c" />
    <CfColorSwatch size="md" :color="c" />
    <CfColorSwatch size="lg" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch size="md" shape="round" :color="c" />
    <CfColorSwatch size="lg" shape="round" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch :color="c" :selected="true" />
    <CfColorSwatch :color="c" disabled />
  </div>
</template>

<script setup>
import { CfColorSwatch } from '@chufix-design/vue';
const c = 'var(--accent-1)';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 16px;">
    <CfColorSwatch size="sm" :color="c" />
    <CfColorSwatch size="md" :color="c" />
    <CfColorSwatch size="lg" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch size="md" shape="round" :color="c" />
    <CfColorSwatch size="lg" shape="round" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch :color="c" :selected="true" />
    <CfColorSwatch :color="c" disabled />
  </div>
</template>

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch size="sm" color="var(--accent-1)" />
      <CfColorSwatch size="md" color="var(--accent-1)" />
      <CfColorSwatch size="lg" color="var(--accent-1)" />
      <CfColorSwatch shape="round" color="var(--accent-1)" />
      <CfColorSwatch selected color="var(--accent-1)" />
      <CfColorSwatch disabled color="var(--accent-1)" />
    </>
  );
}

import { CfColorSwatch } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfColorSwatch size="sm" color="var(--accent-1)" />
      <CfColorSwatch size="md" color="var(--accent-1)" />
      <CfColorSwatch size="lg" color="var(--accent-1)" />
      <CfColorSwatch shape="round" color="var(--accent-1)" />
      <CfColorSwatch selected color="var(--accent-1)" />
      <CfColorSwatch disabled color="var(--accent-1)" />
    </>
  );
}

API

Prop	Type	Default	Description
`color`	`string`	—	Any CSS color or token
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	18 / 24 / 32 px
`shape`	`'square' \| 'round'`	`'square'`
`selected`	`boolean`	`false`	Selection ring
`add`	`boolean`	`false`	Add-placeholder (dashed + plus)
`disabled`	`boolean`	`false`
`label`	`string`	—	Custom aria-label