Resumen
ColorSample es una muestra de color no interactiva. Úsalo junto a una etiqueta para que el significado no dependa solo del color. La selección pertenece al control circundante.
Uso
colorName selecciona una entrada de la paleta del tema para el relleno y el borde. variant acepta default o circle. Si se omite, se usa la forma predeterminada.
Colores personalizados
color personalizado anula el relleno; colorName sigue siendo obligatorio y continúa determinando el color del borde. Las props nativas, className, style y ref se dirigen al div de la muestra. render acepta un elemento o una callback mediante la composición de Base UI; por ejemplo, un span dentro de texto. Los estilos del consumidor anulan el relleno, el borde o la geometría predeterminados. Las muestras decorativas usan aria-hidden="true"; una muestra independiente con significado usa role="img" con aria-label o aria-labelledby. Para ofrecer colores seleccionables, compón la muestra de color dentro de un ListItem con etiqueta.
Migración
ColorSampleProps y ColorSampleVariant siguen disponibles en la familia data-display. Se elimina la variante pipeline no utilizada. Los indicadores específicos del producto pertenecen a la aplicación y usan estilos nativos o composición. Las muestras predeterminadas y circulares mantienen su apariencia actual.
”Props”
Mark decorative swatches as hidden from assistive technology.
string
Accessible name when the caller supplies role=“img”.
string
CSS class merged with the swatch class.
string
CSS color that overrides the background; the border still uses
colorName."amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"
requerido
Theme color used for the background and border. Required even when
color overrides the background.Ref<HTMLDivElement>
Ref to the swatch div, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Element or render callback composed through Base UI useRender.
CSSProperties
Native styles merged with the swatch color defaults. Explicit styles win.
"circle" | "default"
Generic swatch shape:
default or circle. Omitting it uses the default shape.