# Social Link

Social Link is a compact icon-based component for linking to social media profiles. Used within the Footer component.

## Component summary

- Category: Components
- Version: 3.0.18
- Behavior type: CSS presentation with application-owned state
- Implementation model: standard HTML elements with UX4G classes
- Named React, Angular, or Vue component export: **No**
- Human visual preview: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-social-link--introduction

## Installation contract

- Consumer stylesheet: https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css
- CDN runtime, in order: https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js, then https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js
- npm: import `ux4g-web-components/styles.css` and `ux4g-web-components/design-system` once in the application entry file.
- Never use a named UI-component import such as `import { Button } from "ux4g-web-components"`. UX4G is class-based.
- Framework syntax rules: https://doc.ux4g.gov.in/web/llms/framework-syntax.md

## CSS source contract

Use https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css in applications. The partial URLs below are evidence and debugging references; they are not standalone replacements for the complete bundle.

- Component partial: https://cdn.ux4g.gov.in/UX4G@3.0.18/components/social-link.css
  - Repository source: `src/components/social-link.css`

## DOM and attribute contract

- Elements used by canonical examples: None

## CSS class contract

Class categories are derived from the canonical markup and the shipped CSS partials. Plain structural state classes are included even when they do not start with `ux4g-`.

### Component classes used in canonical markup

None observed.

### Structural and state classes used in canonical markup

None observed.

### Utility classes used in canonical markup

None observed.

### Additional classes supported by the resolved component CSS

`ux4g-social-link`, `ux4g-social-link-dark`, `ux4g-social-link-default`, `ux4g-social-link-light`

## Framework adaptation

- The HTML below is canonical for HTML and Angular templates.
- In React/TSX, preserve the same elements, class values, ARIA attributes, data attributes, and DOM order; change only framework syntax such as `class` to `className` and `for` to `htmlFor`.
- Keep `aria-*` and `data-*` attributes hyphenated in React. Use JSX expressions only for dynamic state and event handlers.
- Do not replace the markup with an imported UX4G framework component. No such export exists.

## Usage

Use the documented variants and class names. If exact markup is still required after checking this page and the catalog, use the linked Storybook page as the final fallback.

## JavaScript and state ownership

- Runtime classification: CSS presentation with application-owned state
- Global CDN runtime files remain https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g.js and https://cdn.ux4g.gov.in/UX4G@3.0.18/ux4g-custom.js.

### UX4G provides

- CSS presentation and the behavior implemented by the globally loaded UX4G runtime files.

### Application provides

- Application data, business rules, dynamic values, and event handlers that are not explicitly implemented by the UX4G runtime.

## Responsive behavior

No component-specific media query is present in the resolved CSS partial. Page-level layout may still respond through UX4G layout and utility classes.

## Accessibility contract

- Preserve native element semantics and every documented label, relationship, and state attribute.
- Ensure every interactive control has an accessible name and is keyboard operable.
- Use `type="button"` for non-submit buttons placed inside forms.
- Verify focus visibility, focus order, and WCAG 2.1 AA contrast in the consuming application.

## Common mistakes

- Do not use `import { SocialLink } from "ux4g-web-components"`.
- Do not invent `ux4g-*` classes or omit a documented structural/state class because it lacks the prefix.
- Do not copy Storybook documentation-shell classes into application markup.