FillSwatch

FillSwatch exposes a semantic preview for a fill without imposing application styling. Its slot provides the effective fill, preview background, category, and transparency state. The root also publishes data-fill-type, data-fill-category, and data-transparent for styling and tests.

When nested in BindableValueRoot<Color>, a bound solid fill previews the provider's resolved color and forwards the binding state attributes. Reading or focusing a swatch never detaches the binding. Consumers can place a checkerboard below the slot's background value for transparent paints.

<script setup lang="ts">
import type { Fill } from '@open-pencil/scene-graph'
import { FillSwatch } from '@open-pencil/vue'

const fill: Fill = {
  type: 'SOLID',
  color: { r: 0.2, g: 0.5, b: 0.9, a: 0.5 },
  opacity: 1,
  visible: true
}
</script>

<template>
  <FillSwatch :fill="fill" label="Brand fill" v-slot="swatch">
    <span :style="{ background: swatch.background }" />
  </FillSwatch>
</template>

Generated API reference

FillSwatch

Generated from packages/vue/src/primitives/Fill/FillSwatch.vue

Props

Prop	Default	Type
fill* Fill represented by the swatch.	—	Fill
label Accessible name for the preview.	—	string | undefined
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"span"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	FillSwatchSlotProps

Related APIs

• FillRoot
• BindableValue