# 标记 · JGuang UI

> 通过紧凑的图形与文字表达即时状态。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `marker-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


The `Marker` component displays inline conversation markers such as status updates, system notes, bordered rows, and labeled separators. Compose it with [`Message`](/systems/jguang-ui/docs/components/base/message) in a conversation thread.

## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/marker.tsx](/r/jguang-ui/radix/marker.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
```

```tsx showLineNumbers
<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>
```

## Composition

Use the following composition to build a marker:

```text
Marker
├── MarkerIcon
└── MarkerContent
```

## Features

- Inline marker, bordered row, and labeled separator variants
- Decorative icon slot that is hidden from assistive tech
- Polymorphic root via `asChild` for link and button markers
- Pairs with the [`shimmer`](/systems/jguang-ui/docs/utils/shimmer) utility for streaming status text
- Customizable styling through the `className` prop on every part

## Variants

Use `variant` to switch between an inline marker, bordered row, and labeled separator.


> 示例 `marker-variants`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


| Variant     | Description                                          |
| ----------- | ---------------------------------------------------- |
| `default`   | An inline marker for status, notes, and actions.     |
| `border`    | A default marker with a bottom border under the row. |
| `separator` | A centered label with divider lines on each side.    |

## Status

Set `role="status"` and include a [`Spinner`](/systems/jguang-ui/docs/components/base/spinner) for streaming or in-progress markers so updates are announced.


> 示例 `marker-status`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


## Shimmer

Add the [`shimmer`](/systems/jguang-ui/docs/utils/shimmer) utility class to `MarkerContent` for an animated streaming-text effect. The utility ships with the `JGuang UI Registry` package — see the shimmer docs for installation.


> 示例 `marker-shimmer`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


## Separator

Use the `separator` variant for labeled dividers, such as dates or section breaks, in a conversation.


> 示例 `marker-separator`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


## Border

Use the `border` variant for status rows that should keep the default marker alignment while separating the next row.


> 示例 `marker-border`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


## With Icon

Use `MarkerIcon` to render an icon alongside the content. Use `flex-col` to stack the icon above the content.


> 示例 `marker-icon`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


## Links and Buttons

Turn a marker into a link or button with the `asChild` prop on `Marker`.


> 示例 `marker-link-button`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/marker


```tsx showLineNumbers
import { Marker, MarkerContent } from "@/components/ui/marker"

export function MarkerLinkDemo() {
  return (
    <Marker asChild>
      <a href="#">
        <MarkerContent>View the pull request</MarkerContent>
      </a>
    </Marker>
  )
}
```

## Accessibility

`Marker` is presentational by default. The correct semantics depend on how you use it, so choose the role based on intent rather than relying on a single default.

### Status and Progress

For streaming or progress markers such as "Thinking..." or a running tool, set `role="status"` so assistive tech announces the update as it appears. `Marker` forwards `role` to the underlying element.

```tsx showLineNumbers
<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Compacting conversation</MarkerContent>
</Marker>
```

### Labeled Separators

A separator that carries text, such as a date or a section label, needs no role. The divider lines are decorative CSS pseudo-elements, and the text is announced as ordinary content.

```tsx showLineNumbers
<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>
```


  **Note:** Do not add `role="separator"` to a labeled divider. A separator
  takes its accessible name from `aria-label`, not from its text, and its
  contents are treated as presentational, so the visible label would not be
  announced. Reserve `role="separator"` for a divider with no meaningful text.


### Bordered Markers

A bordered marker keeps the same semantics as the default marker. The bottom border is decorative, so choose `role="status"`, `asChild`, or no role based on the marker's purpose.

```tsx showLineNumbers
<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>
```

### Decorative Icons

`MarkerIcon` is decorative and hidden from assistive tech with `aria-hidden`, so the adjacent `MarkerContent` carries the meaning. For an icon-only marker, provide an `aria-label` or visible text so it is not announced as empty.

```tsx showLineNumbers
<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>
```

### Interactive Markers

When a marker links or triggers an action, render it as a real `<button>` or `<a>` with the `asChild` prop so it is focusable and exposes the correct role. The accessible name comes from the marker text.

```tsx showLineNumbers
<Marker asChild>
  <a href="/files">
    <MarkerIcon>
      <FileTextIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </a>
</Marker>
```

## API Reference

### Marker

The root marker element. The file also exports `markerVariants` for composing the marker styles into custom components.

| Prop        | Type                                   | Default     | Description                                      |
| ----------- | -------------------------------------- | ----------- | ------------------------------------------------ |
| `variant`   | `"default" \| "border" \| "separator"` | `"default"` | The marker layout.                               |
| `asChild`   | `boolean`                              | `false`     | Render as the child element, such as a link.     |
| `className` | `string`                               | -           | Additional classes to apply to the root element. |

### MarkerIcon

A decorative icon slot. Hidden from assistive tech with `aria-hidden`.

| Prop        | Type     | Default | Description                                   |
| ----------- | -------- | ------- | --------------------------------------------- |
| `className` | `string` | -       | Additional classes to apply to the icon slot. |

### MarkerContent

The marker text content.

| Prop        | Type     | Default | Description                                      |
| ----------- | -------- | ------- | ------------------------------------------------ |
| `className` | `string` | -       | Additional classes to apply to the content slot. |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt