Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

ColorSwatch

ColorSwatch is a component that displays color samples.

Source@yamada-ui/color-picker

Props

ColorSwatchProps

color

Description

The color used for the swatch element.

Type

UIValue<"border" | "link" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | ... 315 more ... | "link.950">

Default

#ffffff00

colorScheme

Description

The visual color appearance of the component.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

isRounded

Description

If true, the color swatch will be perfectly round. Else, it'll be slightly round.

Type

boolean

Default

false

overlays

Description

The overlay used for the swatch element.

Type

HTMLUIProps<"div">[]

size

Description

The size of the ColorSwatch.

Type

"sm" | "md" | "lg"

Default

md

variant

Description

The variant of the ColorSwatch.

Type

"basic" | "rounded"

Default

basic

withShadow

Description

If true, the swatch element has an inner box-shadow.

Type

boolean

Default

true

Edit this page on GitHub

PreviousInfiniteScrollAreaNextMarkdown