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



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

Lists the store's contact channels (mobile, phone, WhatsApp, Telegram, email) taken from the store settings, with an icon
and link for each one that has a value. Use it in the footer or header; it renders nothing when the store has no contacts.

## Use it [#use-it]

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

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

## Try it [#try-it]

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

## Example [#example]

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

export function Example() {
  return (
    <SallaContacts horizontal iconsOnly hideTitle />
  );
}
```

```html
<salla-contacts horizontal icons-only hide-title></salla-contacts>
```

````ts
Header variant (shows only phone and email)
```html
<salla-contacts is-header contacts-title="Call us"></salla-contacts>
````

```

## Properties

| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `contactsTitle` | `contacts-title` | Heading shown above the list. Defaults to the translated `blocks.footer.social` text. In the `is-header` variant it is the label printed before the phone number. | `string` |  |
| `hideTitle` | `hide-title` | Hides the title heading in the default (list) layout. | `boolean` |  |
| `horizontal` | `horizontal` | Lays the list out horizontally. When false the list is vertical. | `boolean` |  |
| `iconsOnly` | `icons-only` | Shows only the icons and hides the contact values. Applies only to the default item markup, not to a custom `contact` slot. | `boolean` |  |
| `isHeader` | `is-header` | Renders the compact header layout instead of the list: only the phone and email contacts, as links, and the slot is not used. | `boolean` |  |

## Slots

| Slot | Description |
| --- | --- |
| `contact` | Replaces contact item, has replaceable props `{icon}`, `{value}`. |
```