---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.2
  - property: og:type
    content: article
  - property: article:section
    content: Plugin platform
  - property: og:title
    content: TrackerDisclosure
  - property: article:tag
    content: Техническая инструкция
alternate:
  - https://yandex.ru/support/tracker/en/plugins/components/tracker-disclosure.md
  - https://yandex.ru/support/tracker/ru/plugins/components/tracker-disclosure.md
  - href: en/plugins/components/tracker-disclosure.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/en/llms.txt

[← Back to components list](https://yandex.ru/support/tracker/en/plugins/components/index.md)

# TrackerDisclosure {#tracker-disclosure}

A collapsible block (accordion) component in Tracker style. Built on `Disclosure` from `@gravity-ui/uikit` with additional features: custom classes for component parts, configurable arrow size, and a toolbar slot next to the header.

## Basic usage {#usage}

```tsx
import {TrackerDisclosure} from '@weavix/tracker-components';

<TrackerDisclosure summary="Section header">
    <p>Section content</p>
</TrackerDisclosure>
```

## With toolbar and custom settings {#toolbar}

```tsx
import {TrackerDisclosure} from '@weavix/tracker-components';

<TrackerDisclosure
    summary="Settings"
    defaultExpanded
    arrowPosition="start"
    arrowSize={16}
    toolbar={<button>Action</button>}
    summaryClassName="my-summary"
>
    <p>Content</p>
</TrackerDisclosure>
```

## Props {#props}

The component accepts all `DisclosureProps` from `@gravity-ui/uikit`, plus additional ones:

| Prop | Type | Default | Description |
|---|---|---|---|
| `summary` | `ReactNode` | — | Header content |
| `arrowPosition` | `'start'` \| `'end'` | `'end'` | Arrow position relative to the header |
| `arrowSize` | `number` | `20` | Arrow icon size in pixels |
| `toolbar` | `ReactNode` | — | Additional content next to the header, but not inside the button |
| `summaryClassName` | `string` | — | CSS class for the header block |
| `toggleClassName` | `string` | — | CSS class for the toggle button |
| `arrowClassName` | `string` | — | CSS class for the arrow icon |
| `className` | `string` | — | CSS class for the root element |