{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tag-react-component","__idx":0},"children":["Tag React component"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tag"]}," component to change how your project displays labels, categories, status indicators, and other short pieces of information."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"import","__idx":1},"children":["Import"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { Tag } from '@redocly/theme/components/Tag/Tag';\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"properties","__idx":2},"children":["Properties"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Prop"},"children":["Prop "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"30%","data-label":"Type"},"children":["Type "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["children"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content to display inside the tag."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["StatusColor"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color"]}," | string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Color scheme or custom color value."," ","Accepts predefined color values or any valid CSS color string."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Predefined Color values:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'red'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'green'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'blue'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'grey'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'turquoise'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'magenta'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'purple'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'carrot'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'raspberry'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'orange'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'grass'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'persian-green'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'sky'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'blueberry'"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["StatusColor values:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default status:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'success'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'processing'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'error'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'warning'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'default'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Action status:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'approved'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'declined'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'pending'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Subject status:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'active'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'draft'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'deprecated'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'product'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTTP methods:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'get'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'post'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'put'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'delete'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'option'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'patch'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'head'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'hook'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'link'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Action colors:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'receive'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'send'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Channel:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'channel'"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTTP status:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'http-deprecated'"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variant"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["enum ('outline' | 'filled')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Visual style variant."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'filled'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["size"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Size variant for the tag."," ","Available values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'small'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'medium'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'large'"]},"."," ","Default: standard size."," ","See ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding/css-variables/component#tags"},"children":["CSS variables documentation"]}," for theming details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["closable"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a close button."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the tag is in active state."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderless"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to hide the border."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withStatusDot"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a status dot."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["statusDotColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of the status dot."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'var(--tag-status-dot-color-default)'"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon to display alongside or instead of text content."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maxLength"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Maximum character length before truncation."," ","Text longer than this value will be truncated with ellipsis."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textTransform"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["enum ('uppercase' | 'lowercase' | 'capitalize' | 'none')"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Text transformation style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(event: React.MouseEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Click event handler for interactive tags."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onKeyDown"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(event: React.KeyboardEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Keyboard event handler for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClose"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(event: React.MouseEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Close button click handler."," ","Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["closable"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selectable"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Makes selectable (interactive)."," ","Enables hover and focus styles for better user interaction."," ","Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabIndex"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tab order for keyboard navigation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes to apply to the tag."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Inline styles to apply to the tag."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":3},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/react-components/list"},"children":["Built-in React components"]}]}," - Browse all available built-in React components that you can customize and extend in your projects"]}]}]},"frontmatter":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["configOptionRequirements","table"],"title":"Tag React component","lastModified":"2026-10-01T23:00:57.000Z"}