# Marker Displays an inline status, system note, bordered row, or labeled separator in a conversation. ```twig
Switched to a new branch Thinking... Conversation compacted Explored 4 files
``` ## Installation > [!NOTE] > Available since UX Toolkit 3.5. ```shell php bin/console ux:install marker --kit shadcn ``` ## Usage ```twig Explored 4 files ``` ## Examples ### Variants Use the `variant` prop to switch between an inline marker, a bordered row, and a labeled separator. ```twig
A default marker for inline notes. A separator marker A border marker for row boundaries.
``` ### Status Set `role="status"` and include a `Spinner` for streaming or in-progress markers so updates are announced. ```twig
Compacting conversation Running tests
``` ### Shimmer Add an animation class to `Marker:Content` for a streaming-text effect. Shadcn ships a dedicated `shimmer` utility in its own package; with plain Tailwind, `animate-pulse` gives the same in-progress cue. ```twig
Thinking... Reading 4 files
``` ### Separator Use the `separator` variant for labeled dividers, such as dates or section breaks, in a conversation. A labeled separator needs no role: the divider lines are decorative CSS pseudo-elements and the text is announced as ordinary content. Do not add `role="separator"` — it takes its accessible name from `aria-label`, so the visible label would not be announced. ```twig
{% for label in ['Today', 'Worked for 42s', 'Conversation compacted'] %} {{ label }} {% endfor %}
``` ### Border Use the `border` variant for status rows that should keep the default marker alignment while separating the next row. ```twig {% set rows = [ { icon: 'lucide:git-branch', label: 'Switched to release-candidate' }, { icon: 'lucide:search', label: 'Reviewed 8 related files' }, { icon: 'lucide:file-text', label: 'Opened implementation notes' }, ] %}
{% for row in rows %} {{ row.label }} {% endfor %}
``` ### With Icon Use `Marker:Icon` to render an icon alongside the content. It is decorative and hidden from assistive technologies, so the adjacent `Marker:Content` carries the meaning. Use `flex-col` to stack the icon above the content. ```twig
Switched to a new branch Explored 4 files Syncing completed
``` ### Links and Buttons Turn a marker into a link or a button with the `as` prop on `Marker`, so it is focusable and exposes the correct role. The accessible name comes from the marker text. ```twig
View the pull request Revert this change
``` ### RTL To enable RTL support, set the `dir="rtl"` attribute on the root element. ```twig
{# Arabic #}
تم التبديل إلى فرع جديد تم ضغط المحادثة تم استكشاف 4 ملفات
{# Hebrew #}
עברת לענף חדש השיחה כווצה נסרקו 4 קבצים
``` ## Accessibility - `Marker` is presentational by default. It forwards `role`, so pick the semantics from what the marker is for rather than relying on a single default. - For a streaming or progress marker such as "Thinking..." or a running tool, set `role="status"` so assistive tech announces the update as it appears. - A `separator` marker that carries text, such as a date or a section label, needs no role: the divider lines are decorative pseudo-elements and the text is announced as ordinary content. Do not add `role="separator"` to it, since a separator takes its name from `aria-label` and treats its contents as presentational, so the visible label would be lost. - A `border` marker keeps the same semantics as the default one. The bottom border is decorative. - `Marker:Icon` is hidden from assistive tech with `aria-hidden`, so `Marker:Content` carries the meaning. Give an icon-only marker an `aria-label` so it is not announced as empty. - Render an interactive marker with `as="button"` or `as="a"`, so it is focusable and operable from the keyboard. ## API Reference ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `variant` | `'default'\|'separator'\|'border'` | `'default'` | The visual style variant. | | `as` | `'div'\|'a'\|'button'` | `'div'` | The HTML tag to render. | | Block | Description | |:------|:------------| | `content` | The marker content, typically includes `Marker:Icon` and `Marker:Content`. | ### `` | Block | Description | |:------|:------------| | `content` | The marker text content. | ### `` | Block | Description | |:------|:------------| | `content` | The decorative icon rendered inside the marker. |