> ## 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/ar/ui/primitives/navigation/list-item.md) ذي تسمية.

## الترحيل

يبقى `ColorSampleProps` و`ColorSampleVariant` متاحين من مجموعة عرض البيانات. تُزال صيغة `pipeline` غير المستخدمة. تنتمي المؤشرات الخاصة بالمنتج إلى التطبيق، باستخدام الأنماط الأصلية أو التركيب. تحافظ عينات الألوان الافتراضية والدائرية على مظهرها الحالي.

## الإزاحة

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