> ## 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.
# Tag
> Label a category or attribute with a theme color and optional icon.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
Use `Tag` for categories, priorities, or other short attributes. Keep a text label so the meaning does not depend on color. Use [Status](/ui/primitives/data-display/status) when you need a state indicator and loading feedback.
## Usage
```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';
export const PriorityTag = () => Urgent;
```
`color` is required and accepts a theme color or `transparent`. The default element is always a `span`, including when a native click handler is supplied. Add a decorative icon with `startIcon`; the label supplies its accessible meaning.
## Variants
```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';
export const CategoryTags = () => (
Customer
Partner
Prospect
Unassigned
);
```
`soft` is the default treatment. `solid` emphasizes the label, `outline` adds a border, and `ghost` removes the background. Use `borderStyle="dashed"` with `outline` and `weight="medium"` for a stronger label.
## Colors
Keep the label meaningful without relying on its color. The catalog compares the default soft treatment; the same palette is available to the other variants.
## Filter by a tag
```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';
type CategoryFilterProps = {
selected: boolean;
onToggle: () => void;
};
export const CategoryFilter = ({ selected, onToggle }: CategoryFilterProps) => (
}
>
Customer
);
```
Compose an interactive owner through `render`. Put its click handler, native attributes, ref, and disabled state on that owner. A real button supplies focus, Enter, and Space activation. Selection state belongs to your application; use `aria-pressed` for a toggle and a visible treatment for the selected state. For navigation, render a link with its destination, such as ``. Native owners retain Tag's appearance.
## Long labels
By default, `truncate={true}` truncates constrained string labels and exposes their full text in a tooltip on hover. Set `truncate={false}` to keep the full label at its natural width without a tooltip, even when its parent is narrower. The parent layout owns wrapping, scrolling, and clipping.
```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';
export const FullCategoryLabel = () => (
Enterprise customer
);
```
Node children remain caller-owned content, so compose their text, translations, and intentional links directly.
## Props
Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.
Border style used by the outline variant.
Theme color for the tag, or `transparent` for an unfilled label.
Native click handler. Does not change the default span or add keyboard activation.
Replaces the default span. Compose a button or link to provide explicit interaction semantics.
Decorative icon before the label. Hidden from assistive technology.
Truncates constrained string labels and exposes the full text in a tooltip. Set to `false` to keep the full label at its natural width without a tooltip, even inside a narrower parent.
Visual treatment of the tag background and border.
Font weight of the label.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.