Color Swatch

Added: 2.5.0 | Last updated: 2.5.0 (11/05/2024)

A ColorSwatch is a simple component that allows the display of a single color. It uses the getHex method under the hood, so will accept a color stored on the Valence palette, a hex value (denoted with #------), or any valid web color as a fallback.

Usage

import { ColorSwatch } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <ColorSwatch
            color="red"
        />
    )
}

---

Props

color (required)	CSSProperties["color"]	The color to display. Will default to the theme default color.
opacity	SwatchOpacity	The opacity of the color to display. Will default to completely filled.
size	ComponentSize	The size of the swatch. Defaults to theme default.
radius	ComponentSize	The size of the swatch. Defaults to "xl".
withOutline	boolean	Whether to display the swatch with an outline. Defaults to true.