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
If true, the color swatch will be perfectly round. Else, it'll be slightly round.
Deprecated
Use fullRounded instead.
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