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

> Display a theme color or a custom color alongside a text label.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`ColorSample` is a non-interactive color swatch. Use it next to a label so the meaning does not depend on color alone. Selection belongs to the surrounding control.

<StoryEmbed storyId="ui-data-display-colorsample--default" title="ColorSample example" />

## Usage

```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" variant="circle" />
    High priority
  </Text>
);
```

`colorName` selects a theme palette entry for the fill and border. `variant` accepts `default`, `circle`, or `pipeline`. Omitting it uses the default shape.

## Custom colors

```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" />
    Brand blue
  </Text>
);
```

A custom `color` overrides the fill; `colorName` remains required and still determines the border color. `className` styles the swatch. Other native attributes and click handlers are not forwarded. To offer selectable colors, compose the swatch inside a labeled [ListItem](/ui/primitives/navigation/list-item).

## Props

<ParamField body="className" type="string">
  CSS class applied to the swatch.
</ParamField>

<ParamField body="color" type="string">
  CSS color that overrides the background; the border still uses `colorName`.
</ParamField>

<ParamField body="colorName" type="&#x22;amber&#x22; | &#x22;blue&#x22; | &#x22;bronze&#x22; | &#x22;brown&#x22; | &#x22;crimson&#x22; | &#x22;cyan&#x22; | &#x22;gold&#x22; | &#x22;grass&#x22; | &#x22;gray&#x22; | &#x22;green&#x22; | &#x22;iris&#x22; | &#x22;jade&#x22; | &#x22;lime&#x22; | &#x22;mint&#x22; | &#x22;orange&#x22; | &#x22;pink&#x22; | &#x22;plum&#x22; | &#x22;purple&#x22; | &#x22;red&#x22; | &#x22;ruby&#x22; | &#x22;sky&#x22; | &#x22;tomato&#x22; | &#x22;turquoise&#x22; | &#x22;violet&#x22; | &#x22;yellow&#x22;" required>
  Theme color used for the background and border. Required even when `color` overrides the background.
</ParamField>

<ParamField body="variant" type="&#x22;circle&#x22; | &#x22;default&#x22; | &#x22;pipeline&#x22;">
  Swatch shape: `default`, `circle`, or `pipeline`. Omitting it uses the default shape.
</ParamField>