Tags

The Tags component displays a list of tags that pertain to a case, and allows the addition or removal of tags from the list.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

The Tags component expects a list of tags which are strings. Each tag is expected to be unique. That tags are rendered as a wrapping inline list of Tag badges. If a tag is clicked, an onTagClick callback function is triggered with the tag string. If the loading prop is true, an indeterminate Progress animation will render in place of the tags.

Errors

If the error prop is provided, the ErrorState component will render in place of any tags. The error prop can be a boolean, rendering the default ErrorState, a string containing a custom message to set on the ErrorState component, or a set of props including the onRetry prop for the component to pass along to ErrorState.

Editing tags

Tags may be edited via the pencil Icon within the Card. When a user clicks the edit Button, a Modal will open containing a ComboBox. User may then de-select previously chosen tags from the input field or add additional tags by typing within the input. When a user types into the ComboBox input, options for them to select will appear if any match their given search. Any time a user modifies their search, an onSearch callback function is triggered with the filter value.

The options which a user may select from while searching are automatically filtered from the list of availableTags provided to the Tags component. This list is filtered by search and existing tags. If the user would like to add a tag that's not present in the availableTags list, they may do so by selecting the Use [filter] option while they conduct their search. This component does not allow duplicate tags to be added.

Once the user is satisfied with their modifications, they may click the Submit Button, which will trigger an onEditTags callback function.

NameTypeDefaultDescription
tags*string[]A list of tags.
availableTagsstring[][] A list of available tags to add from.
classNamestringAdditional CSS classes.
error
boolean |string |ErrorStateProps 
If defined, an error message will render in the component and actions will be disabled.
loadingbooleanIf true, a loading indicator will render in place of the tags list.
onEditTags(tags: SelectedTag[]) => Promise<void>Callback triggered when modified tags are submitted from the modal.
onSearch(filterValue: string) => voidCallback triggered when a search query is changed in the Edit tags modal.
onTagClick(tag: string) => voidCallback triggered when a tag is clicked.
refRef<HTMLElement>Ref for the Tags card.