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



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

<Callout title="Used inside salla-tabs">
  [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs) renders this component for you. You rarely use it directly.
</Callout>

The clickable title of one tab. Place it inside salla-tabs with `slot="header"` and give it the
same `name` as its salla-tab-content so the two stay in sync. Clicking it selects the tab.
It is a plain `div` with a click handler, so it has no keyboard or ARIA handling.

## Use it [#use-it]

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

```tsx
import { SallaTabHeader } from '@salla.sa/twilight-components-react/tab-header';
```

## Example [#example]

```tsx
import { SallaTabs } from '@salla.sa/twilight-components-react/tabs';
import { SallaTabHeader } from '@salla.sa/twilight-components-react/tab-header';
import { SallaTabContent } from '@salla.sa/twilight-components-react/tab-content';

export function Example() {
  return (
    <SallaTabs>
      <SallaTabHeader slot="header" name="details">Details</SallaTabHeader>
      <SallaTabHeader slot="header" name="reviews">Reviews</SallaTabHeader>
      <SallaTabContent slot="content" name="details">Product details</SallaTabContent>
      <SallaTabContent slot="content" name="reviews">Customer reviews</SallaTabContent>
    </SallaTabs>
  );
}
```

```html
<salla-tabs>
  <salla-tab-header slot="header" name="details">Details</salla-tab-header>
  <salla-tab-header slot="header" name="reviews">Reviews</salla-tab-header>
  <salla-tab-content slot="content" name="details">Product details</salla-tab-content>
  <salla-tab-content slot="content" name="reviews">Customer reviews</salla-tab-content>
</salla-tabs>
```

## Properties [#properties]

| Property      | Attribute      | Description                                                                                                                                                           | Type               | Default     |
| ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
| `activeClass` | `active-class` | The class applied to the currently active(selected) tab **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version. | `string`           | `undefined` |
| `centered`    | `centered`     | Center tab items in the given flex. **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version.                     | `boolean`          | `false`     |
| `height`      | `height`       | Set the height of the tab bar **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version.                           | `number \| string` | `undefined` |
| `name`        | `name`         | Header identifier name to sync with the content.                                                                                                                      | `string`           |             |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event         | Description                                                                                                                                                                       | Detail |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `tabSelected` | Fires when the header is clicked. `event.detail` is the object returned by `getChild()`: `{ selected, unselect, name, id }`. The parent salla-tabs listens for it to switch tabs. | `any`  |

## Methods [#methods]

Call these on the element or a React ref.

### `getChild() => Promise<{ selected: any; unselect: any; name: string; id: string; }>` [#getchild--promise-selected-any-unselect-any-name-string-id-string-]

Expose self for the parent.

Returns `Promise<{ selected: any; unselect: any; name: string; id: string; }>`: A Promise that resolves to `{ selected, unselect, name, id }`: functions that mark this header selected or unselected, its `name` and its generated `id`.

## Slots [#slots]

| Slot      | Description            |
| --------- | ---------------------- |
| (default) | The tab title content. |

## Related [#related]

Used inside: [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program), [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).