# Link A link is an interactive, clickable element, usually text or an icon, that directs users to another page, website, or a specific section within the same page, acting as a fundamental tool for navigation and accessing more information **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-link--introduction ## Variants documented in Storybook - DefaultLinks: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-link--defaultlinks - NeutralLinks: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-link--neutrallinks ## 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 Link. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Default Links — Small Variant HTML: ```html Default Link Small Link Link Default Link Disabled ``` React: ```jsx import React from 'react'; const LinkExample1Demo = () => ( <> {/* Variant: default Link Small - Text Only */} Default Link Small {/* Variant: default Link Small - Leading Icon */} open_in_new Link {/* Variant: default Link Small - Trailing Icon */} Link open_in_new {/* Variant: default Link Small - disabled */} Default Link Disabled ); export default LinkExample1Demo; ``` Angular: ```html Default Link Small Link Link Default Link Disabled ``` ### 2. Default Links — Medium Variant HTML: ```html Default Link Medium Link Link Default Link Disabled ``` React: ```jsx import React from 'react'; const LinkExample2Demo = () => ( <> {/* Variant: default Link Medium - Text Only */} Default Link Medium {/* Variant: default Link Medium - Leading Icon */} open_in_new Link {/* Variant: default Link Medium - Trailing Icon */} Link open_in_new {/* Variant: default Link Medium - disabled */} Default Link Disabled ); export default LinkExample2Demo; ``` Angular: ```html Default Link Medium Link Link Default Link Disabled ``` ### 3. Introduction — Introduction HTML: ```html

Components

Link

A link is an interactive, clickable element, usually text or an icon, that directs users to another page, website, or a specific section within the same page, acting as a fundamental tool for navigation and accessing more information

Implementation Showcase

Visual demonstration of various link sizes and color types.

Default Examples

Medium Link Small Link Leading Icon Trailing Icon Default Link Disabled

Neutral Examples

Neutral Medium Neutral Small Leading Icon Trailing Icon Neutral Link Disabled

CSS Class Reference

Quickly copy sizing and variant utility classes for text links.

Default Link Classes

Default Link Small (14px) ux4g-text-link-sm

Default Link Medium (16px) ux4g-text-link-md

Neutral Link Classes

Neutral Link Small (14px) ux4g-text-link-neutral-sm

Neutral Link Medium (16px) ux4g-text-link-neutral-md

``` React: ```jsx import React from 'react'; const LinkExample3Demo = () => ( <>

Components

Link

Implementation Showcase

Visual demonstration of various link sizes and color types.

{/* default Showcase */}

Default Examples

Medium Link Small Link open_in_new Leading Icon Trailing Icon open_in_new Default Link Disabled

{/* Neutral Showcase */}

Neutral Examples

Neutral Medium Neutral Small open_in_new Leading Icon Trailing Icon open_in_new Neutral Link Disabled

CSS Class Reference

Quickly copy sizing and variant utility classes for text links.

{/* default Variants */}

Default Link Classes

Default Link Small (14px) ux4g-text-link-sm

Default Link Medium (16px) ux4g-text-link-md

{/* Neutral Variants */}

Neutral Link Classes

Neutral Link Small (14px) ux4g-text-link-neutral-sm

Neutral Link Medium (16px) ux4g-text-link-neutral-md

); export default LinkExample3Demo; ``` Angular: ```html

Components

Link

Implementation Showcase

Visual demonstration of various link sizes and color types.

Default Examples

Medium Link Small Link Leading Icon Trailing Icon Default Link Disabled

Neutral Examples

Neutral Medium Neutral Small Leading Icon Trailing Icon Neutral Link Disabled

CSS Class Reference

Quickly copy sizing and variant utility classes for text links.

Default Link Classes

Default Link Small (14px) ux4g-text-link-sm

Default Link Medium (16px) ux4g-text-link-md

Neutral Link Classes

Neutral Link Small (14px) ux4g-text-link-neutral-sm

Neutral Link Medium (16px) ux4g-text-link-neutral-md

``` ### 4. Neutral Links — Small Variant (Neutral) HTML: ```html Neutral Link Small Link Link Neutral Link Disabled ``` React: ```jsx import React from 'react'; const LinkExample4Demo = () => ( <> {/* Variant: Neutral Link Small - Text Only */} Neutral Link Small {/* Variant: Neutral Link Small - Leading Icon */} open_in_new Link {/* Variant: Neutral Link Small - Trailing Icon */} Link open_in_new {/* Variant: Neutral Link Small - disabled */} Neutral Link Disabled ); export default LinkExample4Demo; ``` Angular: ```html Neutral Link Small Link Link Neutral Link Disabled ``` ### 5. Neutral Links — Medium Variant (Neutral) HTML: ```html Neutral Link Medium Link Link Neutral Link Disabled ``` React: ```jsx import React from 'react'; const LinkExample5Demo = () => ( <> {/* Variant: Neutral Link Medium - Text Only */} Neutral Link Medium {/* Variant: Neutral Link Medium - Leading Icon */} open_in_new Link {/* Variant: Neutral Link Medium - Trailing Icon */} Link open_in_new {/* Variant: Neutral Link Medium - disabled */} Neutral Link Disabled ); export default LinkExample5Demo; ``` Angular: ```html Neutral Link Medium Link Link Neutral Link Disabled ``` ## 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.