> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ColorSample

> Muestra un color del tema o un color personalizado junto a una etiqueta de texto.

## 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.

**Light**

[Ejemplo de ColorSample (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-colorsample--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de ColorSample (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-colorsample--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-colorsample--display)

## Uso

```tsx theme={null}
import { ColorSample } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const PriorityColor = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ColorSample colorName="red" render={<span />} aria-hidden="true" />
    High priority
  </Text>
);
```

`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

```tsx theme={null}
import { ColorSample } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const BrandColor = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ColorSample
      colorName="blue"
      color="#2563eb"
      render={<span />}
      aria-hidden="true"
    />
    Brand blue
  </Text>
);
```

Un `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](https://docs.twenty.com/es/ui/primitives/navigation/list-item.md) 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"

**aria-hidden** `Booleanish`

Mark decorative swatches as hidden from assistive technology.

**aria-label** `string`

Accessible name when the caller supplies role="img".

**className** `string`

CSS class merged with the swatch class.

**color** `string`

CSS color that overrides the background; the border still uses `colorName`.

**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"` *required*

Theme color used for the background and border. Required even when `color` overrides the background.

**ref** `Ref\<HTMLDivElement\>`

Ref to the swatch div, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render callback composed through Base UI useRender.

**style** `CSSProperties`

Native styles merged with the swatch color defaults. Explicit styles win.

**variant** `"circle" | "default"`

Generic swatch shape: `default` or `circle`. Omitting it uses the default shape.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.