ColorSwatch

ColorSwatch is a component that displays color samples.

Import

import { ColorSwatch } from "@yamada-ui/react"

Copied!

Usage

Editable example

<VStack>
  <Wrap gap="md">
    <ColorSwatch color="#4387f4" />
    <ColorSwatch color="rgba(234, 22, 174, 0.5)" />
    <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" />
  </Wrap>

  <Wrap gap="md">
    {Object.entries(defaultTheme.colors.whiteAlpha).map(([key, color]) => (
      <ColorSwatch key={key} color={color} />
    ))}
  </Wrap>

  <Wrap gap="md">
    {Object.entries(defaultTheme.colors.blackAlpha).map(([key, color]) => (
      <ColorSwatch key={key} color={color} />
    ))}
  </Wrap>
</VStack>

Copied!

Change Variant

Editable example

<Wrap gap="md">
  <ColorSwatch color="#4387f4" variant="basic" />
  <ColorSwatch color="rgba(234, 22, 174, 0.5)" variant="rounded" />
</Wrap>

Copied!

Change Size

Editable example

<Wrap gap="md">
  <ColorSwatch color="#4387f4" size="sm" />
  <ColorSwatch color="rgba(234, 22, 174, 0.5)" size="md" />
  <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" size="lg" />
</Wrap>

Copied!

Disable Shadow

By default, a shadow is included inline to make the color easier to see. To disable the shadow, set withShadow to false.

Editable example

<Wrap gap="md">
  <ColorSwatch color="#4387f4" withShadow={false} />
  <ColorSwatch color="rgba(234, 22, 174, 0.5)" withShadow={false} />
  <ColorSwatch color="hsla(251, 87%, 67%, 0.7)" withShadow={false} />
</Wrap>

Copied!

Edit this page on GitHub

PreviousInfiniteScrollArea NextMarkdown