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

> Отображает цвет темы или пользовательский цвет рядом с текстовой меткой.

## Обзор

`ColorSample` — неинтерактивный образец цвета. Используйте его рядом с меткой, чтобы значение не зависело только от цвета. Выбор относится к окружающему элементу управления.

**Light**

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

**Dark**

[Пример 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)

## Использование

```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` выбирает запись палитры темы для заливки и границы. `variant` принимает `default` или `circle`. Если не указывать его, используется форма по умолчанию.

## Пользовательские цвета

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

Пользовательское значение `color` переопределяет заливку; `colorName` остается обязательным и по-прежнему определяет цвет границы. Нативные свойства, `className`, `style` и `ref` применяются к div-элементу образца. `render` принимает элемент или обратный вызов через композицию Base UI, например элемент span внутри текста. Пользовательские стили переопределяют заливку, границу или геометрию по умолчанию. Декоративные образцы используют `aria-hidden="true"`; отдельный значимый образец использует `role="img"` с `aria-label` или `aria-labelledby`. Чтобы предложить выбираемые цвета, разместите образец внутри [ListItem](https://docs.twenty.com/ru/ui/primitives/navigation/list-item.md) с меткой.

## Миграция

`ColorSampleProps` и `ColorSampleVariant` по-прежнему доступны из семейства data-display. Неиспользуемый вариант `pipeline` удалён. Индикаторы, специфичные для продукта, должны находиться в приложении с использованием нативных стилей или композиции. Образцы default и circle сохраняют существующий внешний вид.

## Свойства

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