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

> Visualizza un colore del tema o un colore personalizzato accanto a un'etichetta di testo.

## Panoramica

`ColorSample` è un campione di colore non interattivo. Usalo accanto a un'etichetta affinché il significato non dipenda solo dal colore. La selezione appartiene al controllo circostante.

**Light**

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

**Dark**

[Esempio di 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)

## Utilizzo

```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` seleziona una voce della tavolozza del tema per il riempimento e il bordo. `variant` accetta `default` o `circle`. Omettendolo, viene utilizzata la forma predefinita.

## Colori personalizzati

```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 valore `color` personalizzato sovrascrive il riempimento; `colorName` rimane obbligatorio e determina comunque il colore del bordo. Le props native, `className`, `style` e `ref` si applicano al div del campione. `render` accetta un elemento o una callback tramite la composizione di Base UI, ad esempio uno span all'interno del testo. Gli stili del consumer sovrascrivono il riempimento, il bordo o la geometria predefiniti. I campioni decorativi usano `aria-hidden="true"`; un campione autonomo significativo usa `role="img"` con `aria-label` o `aria-labelledby`. Per offrire colori selezionabili, inserisci il campione all'interno di un [ListItem](https://docs.twenty.com/it/ui/primitives/navigation/list-item.md) con etichetta.

## Migrazione

`ColorSampleProps` e `ColorSampleVariant` restano disponibili nella famiglia data-display. La variante `pipeline` inutilizzata viene rimossa. Gli indicatori specifici del prodotto appartengono all'applicazione e utilizzano stili nativi o la composizione. I campioni predefinito e circolare mantengono il loro aspetto esistente.

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