Leave Yamada UI a star
StarColorSwatch is a component that displays color samples.
Description
The color used for the swatch element.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Default
#ffffff00Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Description
If true, the color swatch will be perfectly round. Else, it'll be slightly round.
Type
booleanDefault
falseDescription
The overlay used for the swatch element.
Type
HTMLUIProps[]Description
The size of the ColorSwatch.
Type
"xs" | "sm" | "md" | "lg"Default
"sm"Description
The variant of the ColorSwatch.
Type
"basic" | "rounded"Default
"basic"Description
If true, the swatch element has an inner box-shadow.
Type
booleanDefault
trueEdit this page on GitHub