'use client'
import { ColorSwatch } from '@chakra-ui/react'
export const ColorSwatchBasic = () => {
return <ColorSwatch value="#bada55" />
}
Anatomy
import { ColorSwatch, ColorSwatchMix } from '@chakra-ui/react'<ColorSwatch value="#bada55" />Examples
Sizes
Use the size prop to change the size of the color swatch.
'use client';
import { HStack, ColorSwatch, For } from '@chakra-ui/react'
export const ColorSwatchWithSizes = () => {
return (
<HStack>
<For each={['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl']}>
{(size) => <ColorSwatch key={size} value="#bada55" size={size} />}
</For>
</HStack>
)
}
Alpha
The value prop accepts any valid CSS color, including colors with an alpha
channel.
'use client'
import { ColorSwatch, HStack } from '@chakra-ui/react'
export const ColorSwatchWithAlpha = () => {
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
'use client'
import { Badge, ColorSwatch } from '@chakra-ui/react'
export const ColorSwatchWithBadge = () => {
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.
'use client'
import { ColorSwatchMix, HStack } from '@chakra-ui/react'
export const ColorSwatchMixed = () => {
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.
'use client'
import { ColorSwatch, Group } from '@chakra-ui/react'
export const ColorSwatchPalette = () => {
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']
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'base' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'sidebar' | 'sidebar.accent' | 'interaction' | 'accent' | 'presence' | 'status' | 'slate'The color palette of the component |
size | 'md' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit' | 'full'The size of the component |
shape | 'rounded' | 'square' | 'circle' | 'rounded'The shape of the component |