# Tags Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--introduction ## Variants documented in Storybook - TonalTags: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--tonaltags - FilledTags: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--filledtags - OutlineTags: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--outlinetags - TextTags: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--texttags ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Tags. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Filled Tags — Rectangular HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample1Demo = () => ( <> {/* Variant: Filled Tag - Neutral */} token Neutral {/* Variant: Filled Tag - Brand */} token Brand {/* Variant: Filled Tag - Success */} token Success {/* Variant: Filled Tag - Warning */} token Warning {/* Variant: Filled Tag - Error */} token Error {/* Variant: Filled Tag - Info */} token Info ); export default TagsExample1Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 2. Filled Tags — Rectangular (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample2Demo = () => ( <> {/* Variant: Filled Tag - Neutral - Small */} token Neutral {/* Variant: Filled Tag - Brand - Small */} token Brand {/* Variant: Filled Tag - Success - Small */} token Success {/* Variant: Filled Tag - Warning - Small */} token Warning {/* Variant: Filled Tag - Error - Small */} token Error {/* Variant: Filled Tag - Info - Small */} token Info ); export default TagsExample2Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 3. Filled Tags — Circular (Pill) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample3Demo = () => ( <> {/* Variant: Filled Tag - Neutral - Pill */} token Neutral {/* Variant: Filled Tag - Brand - Pill */} token Brand {/* Variant: Filled Tag - Success - Pill */} token Success {/* Variant: Filled Tag - Warning - Pill */} token Warning {/* Variant: Filled Tag - Error - Pill */} token Error {/* Variant: Filled Tag - Info - Pill */} token Info ); export default TagsExample3Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 4. Filled Tags — Circular (Pill) (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample4Demo = () => ( <> {/* Variant: Filled Tag - Neutral - Small Pill */} token Neutral {/* Variant: Filled Tag - Brand - Small Pill */} token Brand {/* Variant: Filled Tag - Success - Small Pill */} token Success {/* Variant: Filled Tag - Warning - Small Pill */} token Warning {/* Variant: Filled Tag - Error - Small Pill */} token Error {/* Variant: Filled Tag - Info - Small Pill */} token Info ); export default TagsExample4Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 5. Introduction — Introduction HTML: ```html
Components

Tags

Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections.

Implementation Showcase

Visual demonstration of various tag variants including Tonal, Filled, Outline, and Text styles.

Tonal Tags

token Neutral token Brand token Success token Warning token Error token Info

Filled Tags

token Neutral token Brand token Success token Warning token Error token Info

Outline Tags

token Neutral token Brand token Success token Warning token Error token Info

Text Tags

token Neutral token Brand token Success token Warning token Error token Info

CSS Class Reference

Quickly copy sizing and variant utility classes for Tags.

Variant Base Classes

Tonal Variant ux4g-tag-tonal-{v}
Filled Variant ux4g-tag-filled-{v}
Outline Variant ux4g-tag-outline-{v}
Text Variant ux4g-tag-text-{v}

Semantic Colors ({v})

Primary (Brand) primary
Neutral / Default neutral
Success (Positive) success
Warning (Caution) warning
Error (Critical) error
Info (Action) info

Modifiers

Small Size ux4g-tag-s
Radius None ux4g-radius-none
Radius Small ux4g-radius-s
Radius Medium ux4g-radius-m
Radius Large ux4g-radius-l
Circular (Pill) ux4g-radius-full
``` React: ```jsx import React from 'react'; const TagsExample5Demo = () => ( <>
Components

Tags

Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections.

Implementation Showcase

Visual demonstration of various tag variants including Tonal, Filled, Outline, and Text styles.

{/* Tonal Tags Showcase */}

Tonal Tags

token Neutral token Brand token Success token Warning token Error token Info
{/* Filled Tags Showcase */}

Filled Tags

token Neutral token Brand token Success token Warning token Error token Info
{/* Outline Tags Showcase */}

Outline Tags

token Neutral token Brand token Success token Warning token Error token Info
{/* Text Tags Showcase */}

Text Tags

token Neutral token Brand token Success token Warning token Error token Info

CSS Class Reference

Quickly copy sizing and variant utility classes for Tags.

{/* Variant Classes */}

Variant Base Classes

Tonal Variant ux4g-tag-tonal-{v}
Filled Variant ux4g-tag-filled-{v}
Outline Variant ux4g-tag-outline-{v}
Text Variant ux4g-tag-text-{v}
{/* Semantic Colors */}

Semantic Colors ({v})

Primary (Brand) primary
Neutral / Default neutral
Success (Positive) success
Warning (Caution) warning
Error (Critical) error
Info (Action) info
{/* Modifier Classes */}

Modifiers

Small Size ux4g-tag-s
Radius None ux4g-radius-none
Radius Small ux4g-radius-s
Radius Medium ux4g-radius-m
Radius Large ux4g-radius-l
Circular (Pill) ux4g-radius-full
); export default TagsExample5Demo; ``` Angular: ```html
Components

Tags

Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections.

Implementation Showcase

Visual demonstration of various tag variants including Tonal, Filled, Outline, and Text styles.

Tonal Tags

token Neutral token Brand token Success token Warning token Error token Info

Filled Tags

token Neutral token Brand token Success token Warning token Error token Info

Outline Tags

token Neutral token Brand token Success token Warning token Error token Info

Text Tags

token Neutral token Brand token Success token Warning token Error token Info

CSS Class Reference

Quickly copy sizing and variant utility classes for Tags.

Variant Base Classes

Tonal Variant ux4g-tag-tonal-{v}
Filled Variant ux4g-tag-filled-{v}
Outline Variant ux4g-tag-outline-{v}
Text Variant ux4g-tag-text-{v}

Semantic Colors ({v})

Primary (Brand) primary
Neutral / Default neutral
Success (Positive) success
Warning (Caution) warning
Error (Critical) error
Info (Action) info

Modifiers

Small Size ux4g-tag-s
Radius None ux4g-radius-none
Radius Small ux4g-radius-s
Radius Medium ux4g-radius-m
Radius Large ux4g-radius-l
Circular (Pill) ux4g-radius-full
``` ### 6. Outline Tags — Rectangular HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample6Demo = () => ( <> {/* Variant: Outline Tag - Neutral */} token Neutral {/* Variant: Outline Tag - Brand */} token Brand {/* Variant: Outline Tag - Success */} token Success {/* Variant: Outline Tag - Warning */} token Warning {/* Variant: Outline Tag - Error */} token Error {/* Variant: Outline Tag - Info */} token Info ); export default TagsExample6Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 7. Outline Tags — Rectangular (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample7Demo = () => ( <> {/* Variant: Outline Tag - Neutral - Small */} token Neutral {/* Variant: Outline Tag - Brand - Small */} token Brand {/* Variant: Outline Tag - Success - Small */} token Success {/* Variant: Outline Tag - Warning - Small */} token Warning {/* Variant: Outline Tag - Error - Small */} token Error {/* Variant: Outline Tag - Info - Small */} token Info ); export default TagsExample7Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 8. Outline Tags — Circular (Pill) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample8Demo = () => ( <> {/* Variant: Outline Tag - Neutral - Pill */} token Neutral {/* Variant: Outline Tag - Brand - Pill */} token Brand {/* Variant: Outline Tag - Success - Pill */} token Success {/* Variant: Outline Tag - Warning - Pill */} token Warning {/* Variant: Outline Tag - Error - Pill */} token Error {/* Variant: Outline Tag - Info - Pill */} token Info ); export default TagsExample8Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 9. Outline Tags — Circular (Pill) (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample9Demo = () => ( <> {/* Variant: Outline Tag - Neutral - Small Pill */} token Neutral {/* Variant: Outline Tag - Brand - Small Pill */} token Brand {/* Variant: Outline Tag - Success - Small Pill */} token Success {/* Variant: Outline Tag - Warning - Small Pill */} token Warning {/* Variant: Outline Tag - Error - Small Pill */} token Error {/* Variant: Outline Tag - Info - Small Pill */} token Info ); export default TagsExample9Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 10. Text Tags — Text Tag (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample10Demo = () => ( <> {/* Variant: Text Tag - Neutral - Small */} token Neutral {/* Variant: Text Tag - Brand - Small */} token Brand {/* Variant: Text Tag - Success - Small */} token Success {/* Variant: Text Tag - Warning - Small */} token Warning {/* Variant: Text Tag - Error - Small */} token Error {/* Variant: Text Tag - Info - Small */} token Info ); export default TagsExample10Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 11. Text Tags — Text Tag HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample11Demo = () => ( <> {/* Variant: Text Tag - Neutral */} token Neutral {/* Variant: Text Tag - Brand */} token Brand {/* Variant: Text Tag - Success */} token Success {/* Variant: Text Tag - Warning */} token Warning {/* Variant: Text Tag - Error */} token Error {/* Variant: Text Tag - Info */} token Info ); export default TagsExample11Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 12. Tonal Tags — Rectangular HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample12Demo = () => ( <> {/* Variant: Tonal Tag - Neutral */} token Neutral {/* Variant: Tonal Tag - Brand */} token Brand {/* Variant: Tonal Tag - Success */} token Success {/* Variant: Tonal Tag - Warning */} token Warning {/* Variant: Tonal Tag - Error */} token Error {/* Variant: Tonal Tag - Info */} token Info ); export default TagsExample12Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 13. Tonal Tags — Rectangular (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample13Demo = () => ( <> {/* Variant: Tonal Tag - Neutral - Small */} token Neutral {/* Variant: Tonal Tag - Brand - Small */} token Brand {/* Variant: Tonal Tag - Success - Small */} token Success {/* Variant: Tonal Tag - Warning - Small */} token Warning {/* Variant: Tonal Tag - Error - Small */} token Error {/* Variant: Tonal Tag - Info - Small */} token Info ); export default TagsExample13Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 14. Tonal Tags — Circular (Pill) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample14Demo = () => ( <> {/* Variant: Tonal Tag - Neutral - Pill */} token Neutral {/* Variant: Tonal Tag - Brand - Pill */} token Brand {/* Variant: Tonal Tag - Success - Pill */} token Success {/* Variant: Tonal Tag - Warning - Pill */} token Warning {/* Variant: Tonal Tag - Error - Pill */} token Error {/* Variant: Tonal Tag - Info - Pill */} token Info ); export default TagsExample14Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ### 15. Tonal Tags — Circular (Pill) (Small) HTML: ```html token Neutral token Brand token Success token Warning token Error token Info ``` React: ```jsx import React from 'react'; const TagsExample15Demo = () => ( <> {/* Variant: Tonal Tag - Neutral - Small Pill */} token Neutral {/* Variant: Tonal Tag - Brand - Small Pill */} token Brand {/* Variant: Tonal Tag - Success - Small Pill */} token Success {/* Variant: Tonal Tag - Warning - Small Pill */} token Warning {/* Variant: Tonal Tag - Error - Small Pill */} token Error {/* Variant: Tonal Tag - Info - Small Pill */} token Info ); export default TagsExample15Demo; ``` Angular: ```html token Neutral token Brand token Success token Warning token Error token Info ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.