Tag

Tag are visual indicator higlighting the state for quick recognition.

Variants

GEL provides 10 different tags to be used in the system.

Demo

Guidance

• A tag is static (non-interactive) by default.
• Tags can help categorize and organize the content based on the metadata provided by each data.
• Tags shouldn't be a standalone, floating element. If it can't be placed withing relationship to the object it supports, consider using another method that provides more context for the metadata.
• Avoid using long text strings inside a tag.

When to use

• Use tag to highlight metadata that provides additional meaning to the primary element.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP