salla-contacts
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.
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
In HTML or JSX, use the tag <salla-contacts> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaContacts } from '@salla.sa/twilight-components-react/contacts';Try it
web-components/salla-contacts
Example
import { SallaContacts } from '@salla.sa/twilight-components-react/contacts';
export function Example() {
return (
<SallaContacts horizontal iconsOnly hideTitle />
);
}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}`. |