---
title: "Tab Block — One Tab of a Tabs Block"
description: "A single tab inside a tabs block, carrying a plain-text title, an optional emoji icon, and its own child blocks."
source: https://blokeditor.com/docs/tab/
lastmod: 2026-10-06
---

Framework JavaScript

Block Tools Tab

# Tab block: one tab of a tabs block

A single tab inside a tabs block. It is not user-insertable on its own. The parent `tabs` block creates and manages its tabs.

The tab saves its `title` and an optional emoji `icon`, both as plain text. An empty icon is not saved. Child blocks are nested inside the tab via `contentIds`. A tab cannot hold another tabs block.

An empty tab shows "Empty tab. Click or drop blocks inside." Clicking it adds a paragraph to the tab.

### Import

TypeScript

```
import { TabTool } from '@bloklabs/core/tools';
```

### Save Data

TypeScript

```
interface TabData {
  title: string; // Plain text label shown in the tab strip
  icon?: string; // Optional emoji shown before the title
}
// Child blocks are referenced via the block's saved `content` array
// (the in-memory `contentIds`), not stored here.
```

JSON

```
{
  "id": "tab1",
  "type": "tab",
  "data": {
    "title": "Overview",
    "icon": "📘"
  },
  "content": ["block1", "block2"]
}
```

### Usage Example

TypeScript

```
// Tab is not inserted directly — it is created by the TabsTool.
import { TabsTool, TabTool } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    tabs: { class: TabsTool },
    tab: { class: TabTool },
  },
});
```