# I9kSocialLinks

> Row of pill-shaped social/contact links, each opening in a new tab, with an icon fallback and a customizable accessible label per item.

```ts
import { I9kSocialLinks } from '@9klabs/design';
```

## Examples

### Icons, with labels

```vue
<div style="position: relative; padding: var(--spacing-8); border: 1px solid var(--border-color); border-radius: var(--radius-md);">
  <I9kSocialLinks :items="items" labels />
</div>
```

### Fallback initial (no icon)

```vue
<div style="position: relative; padding: var(--spacing-8); border: 1px solid var(--border-color); border-radius: var(--radius-md);">
  <I9kSocialLinks :items="noIconItems" />
</div>
```

## Watch out

- Every link opens in a new tab (`target="_blank" rel="noopener"`) — this is not configurable per item or overall.
- An item with no `icon` falls back to a single-letter avatar (the first character of `name`), not a blank space — supply `icon` for every item that should show a real icon.
- `followLabel` builds the accessible name from `item.name`; override it when the links are not "follow" actions (e.g. email or phone contact links).

## API

### Props

| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `items` | `I9kSocialLink[]` | — | yes |
| `labels` | `boolean` | `false` | no |
| `followLabel` | `(platform: string) => string` | `(platform: string) => `Follow on ${platform}`` | no |

### Emits

| Event | Payload |
| --- | --- |
| `click` | `[item: I9kSocialLink, event: MouseEvent]` |

### Slots

- `icon`

### Types

```ts
export interface I9kSocialLink {
  name: string;
  url: string;
  label?: string;
  icon?: I9kIconName;
}
```

## Agent prompt

```text
Use I9kSocialLinks from @9klabs/design for a row of social or contact links (also used internally by I9kFooter).

import { I9kSocialLinks } from '@9klabs/design';

Props:
- items: I9kSocialLink[] (required) — { name: string; url: string; label?: string; icon?: I9kIconName }. This type is not exported from the package — inline the shape or declare your own local type.
- labels?: boolean (default false) — shows `item.label ?? item.name` as visible text next to each icon.
- followLabel?: (platform: string) => string (default `(platform) => \`Follow on \${platform}\``) — builds each link's `aria-label` from `item.name`. Override it for non-social contexts, e.g. a plain "Email" or "Call" link.

Emits: click — [item: I9kSocialLink, event: MouseEvent].

Slots:
- icon — one slot prop, item: I9kSocialLink. Replaces the default rendering (an I9kIcon when `item.icon` is set, otherwise the first letter of `item.name`) for every link.

IMPORTANT: every link renders with `target="_blank" rel="noopener"` unconditionally — there is no prop to open a link in the same tab.

Usage:
<I9kSocialLinks
  :items="[
    { name: 'GitHub', url: 'https://github.com/ismail9k', icon: 'github' },
    { name: 'Mail', url: 'mailto:hello@ismail9k.com', icon: 'mail' },
  ]"
  @click="onSocialClick"
/>
```