ColorSwatch
ColorSwatch is a component that displays color samples.
<ColorSwatch color="#186bf2" />
Usage
import { ColorSwatch } from "@yamada-ui/react"
import { ColorSwatch } from "@/components/ui"
import { ColorSwatch } from "@workspaces/ui"
<ColorSwatch />
Change Variant
<Wrap gap="md">
<For each={["plain", "circle", "square"]}>
{(variant, index) => (
<ColorSwatch color="#186bf2" variant={variant} key={index} />
)}
</For>
</Wrap>
Change Size
<Wrap gap="md" alignItems="center">
<For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
{(size, index) => <ColorSwatch color="#186bf2" size={size} key={index} />}
</For>
</Wrap>
Alpha
Example of color swatch using alpha channels.
<VStack>
<Wrap gap="md">
{Object.entries(theme.colors.whiteAlpha).map(([key, color]) => (
<ColorSwatch key={key} color={color} />
))}
</Wrap>
<Wrap gap="md">
{Object.entries(theme.colors.blackAlpha).map(([key, color]) => (
<ColorSwatch key={key} color={color} />
))}
</Wrap>
</VStack>
Disable Shadow
By default, a shadow is included inline to make the color easier to see. To disable the shadow, set withShadow to false.
<ColorSwatch color="#186bf2" withShadow={false} />
Group
To create color swatch containing multiple colors, use ColorSwatchGroup.
<Wrap gap="md">
<ColorSwatchGroup
items={["green.500", "green.600", "green.700", "green.800"]}
/>
<ColorSwatchGroup items={["red.500", "red.400", "red.300"]} />
<ColorSwatchGroup items={[]} />
</Wrap>
Props
Accessibility
If you set aria-label, it will be read by screen readers.
<ColorSwatch color="#4387f4" aria-label="Blue" />
ARIA Roles and Attributes
| Component | Roles and Attributes | Usage |
|---|---|---|
ColorSwatch | role="img" | Indicates that this is an image. |
aria-roledescription="color swatch" | Sets to "color swatch". | |
aria-label | Sets to the color value. | |
ColorSwatchGroup | aria-label="color swatch group" | Sets to "color swatch group". |
Similar Components
NativeTable
NativeTable is a component for efficiently organizing and displaying data.
Stat
Stat is used to display numbers or data within a box.
Table
Table is a table component equipped with column sorting, row selection, and click event features.