> ## 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 = 240}) => <>
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.
## Category label
```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 a `span`. 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.
## 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
);
```
Supplying `onClick` renders a button. Selection state belongs to your application; use `aria-pressed` for a toggle and a visible treatment for the selected state. `disabled` prevents pointer and keyboard activation. When `render` replaces an interactive tag with a non-button element, set `nativeButton={false}`.
## Long labels
By default, constrained string labels truncate and expose their full text in a tooltip on hover. `preventShrink` keeps the full label width and turns off that tooltip, so make sure the surrounding layout can accommodate it. `preventPadding` removes the horizontal padding for custom layouts.
## 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.
Applies disabled styling and prevents pointer and keyboard activation.
Set to `false` when a clickable tag uses `render` with an element other than a native button.
Removes the tag padding.
Keeps the tag from shrinking and disables string-label truncation and its tooltip.
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
Decorative icon before the label. Hidden from assistive technology.
Visual treatment of the tag background and border.
Font weight of the label.