Skip to content
Last updated

Tag React component

Products:RevelRevelRealmRealm
Plans:ProEnterpriseEnterprise+

Customize the tag component to change how your project displays labels, categories, status indicators, and other short pieces of information.

Import

import { Tag } from '@redocly/theme/components/Tag/Tag';

Properties

Prop Type Description
childrenReact.ReactNodeContent to display inside the tag.

color

StatusColor | Color | string

Color scheme or custom color value. Accepts predefined color values or any valid CSS color string.

Predefined Color values:

  • 'red', 'green', 'blue', 'grey', 'turquoise', 'magenta', 'purple', 'carrot', 'raspberry', 'orange', 'grass', 'persian-green', 'sky', 'blueberry'

StatusColor values:

  • Default status: 'success', 'processing', 'error', 'warning', 'default'
  • Action status: 'approved', 'declined', 'pending'
  • Subject status: 'active', 'draft', 'deprecated', 'product'
  • HTTP methods: 'get', 'post', 'put', 'delete', 'option', 'patch', 'head', 'hook', 'link'
  • Action colors: 'receive', 'send'
  • Channel: 'channel'
  • HTTP status: 'http-deprecated'
variantenum ('outline' | 'filled')Visual style variant. Default: 'filled'.
sizestringSize variant for the tag. Available values: 'small', 'medium', 'large'. Default: standard size. See CSS variables documentation for theming details.
closablebooleanWhether to show a close button. Default: false.
activebooleanWhether the tag is in active state. Default: false.
borderlessbooleanWhether to hide the border. Default: false.
withStatusDotbooleanWhether to show a status dot. Default: false.
statusDotColorstringColor of the status dot. Default: 'var(--tag-status-dot-color-default)'.
iconReact.ReactNodeIcon to display alongside or instead of text content.
maxLengthnumberMaximum character length before truncation. Text longer than this value will be truncated with ellipsis.
textTransformenum ('uppercase' | 'lowercase' | 'capitalize' | 'none')Text transformation style.
onClick(event: React.MouseEvent) => voidClick event handler for interactive tags.
onKeyDown(event: React.KeyboardEvent) => voidKeyboard event handler for accessibility.
onClose(event: React.MouseEvent) => voidClose button click handler. Required when closable is true.
selectablebooleanMakes selectable (interactive). Enables hover and focus styles for better user interaction. Default: false.
tabIndexnumberTab order for keyboard navigation.
classNamestringAdditional CSS classes to apply to the tag.
styleReact.CSSPropertiesInline styles to apply to the tag.

Resources

Build Markdoc tags