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

> Afișează o culoare de temă sau o culoare personalizată alături de o etichetă text.

## Prezentare generală

`ColorSample` este o mostră de culoare neinteractivă. Folosiți-o lângă o etichetă, astfel încât semnificația să nu depindă doar de culoare. Selectarea aparține controlului înconjurător.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

```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` selectează o intrare din paleta temei pentru umplere și contur. `variant` acceptă `default` sau `circle`. Omiterea sa utilizează forma implicită.

## Culori personalizate

```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>
);
```

O `color` personalizată înlocuiește umplerea; `colorName` rămâne obligatoriu și determină în continuare culoarea conturului. Proprietățile native, `className`, `style` și `ref` vizează div-ul eșantionului de culoare. `render` acceptă un element sau un callback prin compunerea Base UI, de exemplu un span în interiorul textului. Stilurile utilizatorului suprascriu umplerea, bordura sau geometria implicite. Eșantioanele de culoare decorative folosesc `aria-hidden="true"`; un eșantion de culoare semnificativ autonom folosește `role="img"` cu `aria-label` sau `aria-labelledby`. Pentru a oferi culori selectabile, compuneți mostra de culoare într-un [ListItem](https://docs.twenty.com/ro/ui/primitives/navigation/list-item.md) etichetat.

## Migrare

`ColorSampleProps` și `ColorSampleVariant` rămân disponibile din familia de afișare a datelor. Varianta `pipeline` neutilizată este eliminată. Indicatorii specifici produsului aparțin aplicației, folosind stiluri native sau compunere. Eșantioanele de culoare implicite și circulare își păstrează aspectul existent.

## Proprietăți

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