# salla-social (https://docs.salla.dev/twilight/react/web-components/salla-social)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Renders a list of icon links to the store's social media accounts, read from the store settings (`store.social`). Accounts without a value, and `whatsapp`, are skipped.
Use it in a theme footer or header. Built-in icons exist for instagram, twitter, facebook, youtube, snapchat and tiktok.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-social>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaSocial } from '@salla.sa/twilight-components-react/social';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Try it [#try-it]

<Demo name="web-components/salla-social" />

## Example [#example]

```tsx
import { SallaSocial } from '@salla.sa/twilight-components-react/social';

export function Example() {
  return (
    <SallaSocial />
  );
}
```

```html
<salla-social></salla-social>
```

```tsx
import { SallaSocial } from '@salla.sa/twilight-components-react/social';

export function Example() {
  return (
    <SallaSocial>
      <a slot="social-item" href="{link}" target="_blank" rel="noopener" aria-label="{type}">{'{'}icon{'}'}</a>
    </SallaSocial>
  );
}
```

```html
<salla-social>
  <a slot="social-item" href="{link}" target="_blank" rel="noopener" aria-label="{type}">{icon}</a>
</salla-social>
```

## Slots [#slots]

| Slot          | Description                                                                                                                                                                                                                                                                                                                                                      |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `social-item` | Template used for every account. The element is read once at start-up, its inner HTML is repeated for each account and then the element is removed. In the template, `{icon}` is replaced by the icon SVG, `{type}` by the network name (for example `instagram`) and `{link}` by the account URL. Without it, a link with the icon and an `aria-label` is used. |