> ## 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 = 120}) => <>
Open in Storybook
;
`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.
## Usage
```tsx theme={null}
import { ColorSample } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';
export const PriorityColor = () => (
} aria-hidden="true" />
High priority
);
```
`colorName` selects a theme palette entry for the fill and border. `variant` accepts `default` or `circle`. 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 = () => (
}
aria-hidden="true"
/>
Brand blue
);
```
A custom `color` overrides the fill; `colorName` remains required and still determines the border color. Native props, `className`, `style`, and `ref` target the swatch div. `render` accepts an element or callback through Base UI composition, for example a span inside text. Consumer styles override the default fill, border, or geometry. Decorative swatches use `aria-hidden="true"`; a standalone meaningful swatch uses `role="img"` with `aria-label` or `aria-labelledby`. To offer selectable colors, compose the swatch inside a labeled [ListItem](/ui/primitives/navigation/list-item).
## Migration
`ColorSampleProps` and `ColorSampleVariant` remain available from the data-display family. The unused `pipeline` variant is removed. Product-specific indicators belong in the application, using native styles or composition. Default and circle swatches keep their existing appearance.
## Props
Mark decorative swatches as hidden from assistive technology.
Accessible name when the caller supplies role="img".
CSS class merged with the swatch class.
CSS color that overrides the background; the border still uses `colorName`.
Theme color used for the background and border. Required even when `color` overrides the background.
Ref to the swatch div, or the element supplied through render.
Element or render callback composed through Base UI useRender.
Native styles merged with the swatch color defaults. Explicit styles win.
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.