import { ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return <ColorSwatch value="#bada55" />
}
Usage
import { ColorSwatch } from "@/components/ui/color-swatch"<ColorSwatch />Examples
Sizes
Use the size prop to change the size of the color swatch.
import { HStack } from "@chakra-ui/react"
import { ColorSwatch } from "@chakra-ui/react"
import { For } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
{(size) => <ColorSwatch key={size} value="#bada55" size={size} />}
</For>
</HStack>
)
}
Alpha
Here's an example of how to create a color swatch with an alpha channel.
import { ColorSwatch, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
{colors.map((color) => (
<ColorSwatch key={color} value={color} size="xl" />
))}
</HStack>
)
}
const colors = [
"rgba(255, 0, 0, 0.5)",
"rgba(0, 0, 255, 0.7)",
"rgba(0, 255, 0, 0.4)",
"rgba(255, 192, 203, 0.6)",
]
With Badge
Here's an example of how to compose the ColorSwatch with a Badge.
#bada55
import { Badge, ColorSwatch } from "@chakra-ui/react"
const Demo = () => {
return (
<Badge>
<ColorSwatch value="#bada55" boxSize="0.82em" />
#bada55
</Badge>
)
}
Mixed Colors
Use the ColorSwatchMix to create a color swatch that contains multiple colors,
but retains the size of a single color swatch.
import { ColorSwatchMix, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack>
<ColorSwatchMix size="lg" items={["red", "pink"]} />
<ColorSwatchMix size="lg" items={["red", "pink", "green"]} />
<ColorSwatchMix
size="lg"
items={["lightgreen", "green", "darkgreen", "black"]}
/>
</HStack>
)
}
Palette
Here's an example of composing multiple swatches to create a palette.
import { ColorSwatch, Group } from "@chakra-ui/react"
const Demo = () => {
return (
<Group attached width="full" maxW="sm" grow>
{swatches.map((color) => (
<ColorSwatch key={color} value={color} size="2xl" />
))}
</Group>
)
}
const swatches = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"]