Marker

Menampilkan status sebaris, catatan sistem, baris berbingkai, atau pemisah berlabel di dalam percakapan.

Switched to a new branch

Thinking...

Conversation compacted

Explored 4 files

<script setup lang="ts">
import { GitBranchIcon, SearchIcon } from '@lucide/vue'
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@/components/ui/marker'
import { Spinner } from '@/components/ui/spinner'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker>
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>Switched to a new branch</MarkerContent>
    </Marker>
    <Marker role="status">
      <MarkerIcon>
        <Spinner />
      </MarkerIcon>
      <MarkerContent class="shimmer">
        Thinking...
      </MarkerContent>
    </Marker>
    <Marker variant="separator">
      <MarkerContent>Conversation compacted</MarkerContent>
    </Marker>
    <Marker>
      <MarkerIcon>
        <SearchIcon />
      </MarkerIcon>
      <MarkerContent>Explored 4 files</MarkerContent>
    </Marker>
  </div>
</template>

Instalasi

CLI

npx shadcn-vue@latest add marker

Manual

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

<script setup lang="ts">
import { Marker, MarkerContent, MarkerIcon, } from '@/components/ui/marker'
</script>

<template>
  <Marker>
    <MarkerIcon>
      <CheckIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </Marker>
</template>

Komposisi

Susunan berikut adalah cara membangun sebuah marker:

Marker
├── MarkerIcon
└── MarkerContent

Fitur

• Tersedia varian marker sebaris, baris bergaris tepi, dan pemisah berlabel.
• Slot ikon dekoratif yang disembunyikan dari teknologi bantu.
• Elemen akar polimorfik lewat render, untuk marker berupa tautan dan tombol.
• Bisa dipadukan dengan utility shimmer untuk teks status yang mengalir.
• Style tiap bagian bisa disesuaikan lewat prop class.

Contoh

Varian

Pakai variant untuk berpindah antara marker sebaris, baris bergaris tepi, dan pemisah berlabel.

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

<script setup lang="ts">
import {
  Marker,
  MarkerContent,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker>
      <MarkerContent>A default marker for inline notes.</MarkerContent>
    </Marker>
    <Marker variant="separator">
      <MarkerContent>A separator marker</MarkerContent>
    </Marker>
    <Marker variant="border">
      <MarkerContent>A border marker for row boundaries.</MarkerContent>
    </Marker>
  </div>
</template>

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

Isi role="status" dan sertakan Spinner pada marker yang sedang berjalan, supaya pembaruannya ikut dibacakan.

Compacting conversation

Running tests

<script setup lang="ts">
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@/components/ui/marker'
import { Spinner } from '@/components/ui/spinner'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker role="status">
      <MarkerIcon>
        <Spinner />
      </MarkerIcon>
      <MarkerContent>Compacting conversation</MarkerContent>
    </Marker>
    <Marker variant="separator" role="status">
      <MarkerIcon>
        <Spinner />
      </MarkerIcon>
      <MarkerContent>Running tests</MarkerContent>
    </Marker>
  </div>
</template>

Shimmer

Tambahkan utility class shimmer pada MarkerContent untuk efek teks mengalir. Cara pemasangannya ada di dokumentasi shimmer.

Thinking...

Reading 4 files

<script setup lang="ts">
import {
  Marker,
  MarkerContent,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker role="status">
      <MarkerContent class="shimmer">
        Thinking...
      </MarkerContent>
    </Marker>
    <Marker variant="separator" role="status">
      <MarkerContent class="shimmer">
        Reading 4 files
      </MarkerContent>
    </Marker>
  </div>
</template>

Separator

Pakai varian separator untuk pembatas berlabel di dalam percakapan, misalnya tanggal atau jeda antar bagian.

Today

Worked for 42s

Conversation compacted

<script setup lang="ts">
import {
  Marker,
  MarkerContent,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker variant="separator">
      <MarkerContent>Today</MarkerContent>
    </Marker>
    <Marker variant="separator">
      <MarkerContent>Worked for 42s</MarkerContent>
    </Marker>
    <Marker variant="separator">
      <MarkerContent>Conversation compacted</MarkerContent>
    </Marker>
  </div>
</template>

Garis Tepi

Pakai varian border untuk baris status yang tetap mengikuti perataan marker bawaan sekaligus memisahkan baris berikutnya.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

<script setup lang="ts">
import { FileTextIcon, GitBranchIcon, SearchIcon } from '@lucide/vue'
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-3 py-12">
    <Marker variant="border">
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>Switched to release-candidate</MarkerContent>
    </Marker>
    <Marker variant="border">
      <MarkerIcon>
        <SearchIcon />
      </MarkerIcon>
      <MarkerContent>Reviewed 8 related files</MarkerContent>
    </Marker>
    <Marker variant="border">
      <MarkerIcon>
        <FileTextIcon />
      </MarkerIcon>
      <MarkerContent>Opened implementation notes</MarkerContent>
    </Marker>
  </div>
</template>

Dengan Ikon

Pakai MarkerIcon untuk menampilkan ikon di samping konten. Pakai flex-col kalau ikonnya ingin ditumpuk di atas konten.

Switched to a new branch

Explored 4 files

Syncing completed

<script setup lang="ts">
import { BookOpenCheck, GitBranchIcon, SearchIcon } from '@lucide/vue'
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-12 py-12">
    <Marker>
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>Switched to a new branch</MarkerContent>
    </Marker>
    <Marker variant="separator">
      <MarkerIcon>
        <SearchIcon />
      </MarkerIcon>
      <MarkerContent>Explored 4 files</MarkerContent>
    </Marker>
    <Marker class="flex-col">
      <MarkerIcon>
        <BookOpenCheck />
      </MarkerIcon>
      <MarkerContent>Syncing completed</MarkerContent>
    </Marker>
  </div>
</template>

Tautan dan Tombol

Ubah marker menjadi tautan atau tombol lewat prop render pada Marker.

View the pull request

<script setup lang="ts">
import { GitBranchIcon, RotateCcwIcon } from '@lucide/vue'
import { toast } from 'vue-sonner'
import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from '@/components/ui/marker'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Marker as-child>
      <a href="#links-and-buttons">
        <MarkerIcon>
          <GitBranchIcon />
        </MarkerIcon>
        <MarkerContent>View the pull request</MarkerContent>
      </a>
    </Marker>
    <Marker as-child>
      <button
        type="button"
        class="transition-colors hover:text-foreground"
        @click="() => toast('You clicked the revert button')"
      >
        <MarkerIcon>
          <RotateCcwIcon />
        </MarkerIcon>
        <MarkerContent>Revert this change</MarkerContent>
      </button>
    </Marker>
  </div>
</template>

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

<template>
  <Marker as-child>
    <a href="#links-and-buttons">
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>View the pull request</MarkerContent>
    </a>
  </Marker>
</template>

Aksesibilitas

Marker bersifat presentasional secara bawaan. Makna yang tepat bergantung pada cara Anda memakainya, jadi pilih role sesuai maksudnya, bukan mengandalkan satu nilai bawaan.

Status dan Progres

Untuk marker yang sedang berjalan seperti "Sedang berpikir..." atau tool yang aktif, isi role="status" supaya teknologi bantu membacakan pembaruannya begitu muncul. Marker meneruskan role ke elemen di baliknya.

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

Pemisah Berlabel

Pemisah yang memuat teks — misalnya tanggal atau label bagian — tidak butuh role. Garis pembatasnya hanya pseudo-element CSS yang dekoratif, dan teksnya dibacakan sebagai konten biasa.

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

TIP

Catatan: jangan menambahkan role="separator" pada pembatas berlabel. Sebuah separator mengambil nama aksesibelnya dari aria-label, bukan dari teksnya, dan isinya dianggap presentasional — sehingga label yang terlihat justru tidak akan dibacakan. Simpan role="separator" untuk pembatas yang memang tanpa teks bermakna.

Marker Bergaris Tepi

Marker bergaris tepi punya makna yang sama dengan marker biasa. Garis bawahnya dekoratif, jadi pilih role="status", render, atau tanpa role sama sekali, sesuai tujuan markernya.

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

Ikon Dekoratif

MarkerIcon bersifat dekoratif dan disembunyikan dari teknologi bantu lewat aria-hidden, jadi maknanya dipegang MarkerContent di sebelahnya. Untuk marker yang hanya berisi ikon, berilah aria-label atau teks yang terlihat supaya tidak terbaca kosong.

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

Marker yang Interaktif

Kalau marker berfungsi sebagai tautan atau pemicu aksi, tampilkan sebagai <button> atau <a> sungguhan lewat prop render, supaya bisa di-focus dan punya role yang benar. Nama aksesibelnya diambil dari teks marker.

<Marker as-child>
  <a href="/files" >
    <MarkerIcon>
      <FileTextIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </a>
</Marker>

Referensi API

Marker

Elemen akar marker. Berkasnya juga mengekspor markerVariants supaya style marker bisa Anda pakai ulang di komponen sendiri.

Prop	Type	Default	Description
variant	"default" | "border" | "separator"	"default"	The marker layout.
render	ReactElement | function	-	Render as a different element, such as a link.
class	string	-	Additional classes to apply to the root element.

MarkerIcon

Slot ikon dekoratif. Disembunyikan dari teknologi bantu lewat aria-hidden.

Prop	Tipe	Bawaan	Description
class	string	-	Additional classes to apply to the icon slot.

MarkerContent

Isi teks marker.

Prop	Tipe	Bawaan	Description
class	string	-	Additional classes to apply to the content slot.