LabeledDivider

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as LabeledDividerStories from './LabeledDivider.stories';

<Meta of={LabeledDividerStories} name='Usage' />

<Title />

## Purpose

A horizontal rule with a pill label centered on it, to mark a point in a stream of content. The label can be swapped for any control, such as a "Show more" button that unfolds more content under the divider.

## Usage

Use it to break up an event log, runtime or edge logs, a thread or a timeline: a date, a jump in time, or a state change such as an agent joining.

- Keep the label short and translated.
- Add a `prefixIcon` and/or `suffixIcon` to the label.
- Pass `menuItems` and an `id` to make the label a selector with a chevron, for jumping to another point in time. Add `datePicker` for a last menu item that opens a date picker.
- Pass `action` to swap the label for any control, centered on the line. The usual case is a "Show more" Button (small, secondary, with an angle icon) that unfolds more content under the divider. The divider only places the control: the screen owns it, its `aria-expanded` and `aria-controls`, the label that changes between "Show more" and "Show less", and the content it reveals. When `action` is set, `label`, `menuItems` and the icons are ignored, and the divider is a plain group, not a separator, because it holds a control.
- Use `size` `s` (default) or `xs`.
- Use `agentic` for a state change, not for dates. With `action` the tone still colors the lines either side.
- The label, the selector and the action are three ways to fill the middle of the divider; use one of them.

## Implementation

See the table below for the available props. The other stories show every variant. The With Action story shows the "Show more" case, with the content that unfolds under it.

<hr />

<Canvas of={LabeledDividerStories.Default} />
<Controls of={LabeledDividerStories.Default} />