# syn-tab-panel

## Summary

Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.

## Documentation

- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs)
- [Figma Examples](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=42207-340626)
- [Figma Component](https://www.figma.com/design/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?node-id=20730-44681)

## Class Information

- **Tag Name:** `syn-tab-panel`
- **Import Example:** `import SynTabPanel from '@synergy-design-system/components/components/tab-panel/tab-panel.js';`

## Usage Information

- **Status:** stable
- **Since:** 2.1.0

## Available Slots

- `(default)`: The tab panel's content.

## Available Properties

### active

attribute: `active`
reflects: yes
type: `boolean`
default: `false`

When true, the tab panel will be shown.

### name

attribute: `name`
reflects: yes
type: `string`
default: `''`

The tab panel's name.

## Available CSS Parts

- `base`: The component's base wrapper.
