Componentes

Marker

Marcadores tipográficos, separadores e linhas de contexto em conteúdo.

Conteúdo e mídia

Carregando demonstração…

Código da demo
"use client";

import { InfoIcon } from "lucide-react";
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker";

export function Demo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-fe-4">
      <Marker>
        <MarkerIcon>
          <InfoIcon />
        </MarkerIcon>
        <MarkerContent>
          Marcador padrão com ícone e texto de apoio.
        </MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerContent>Variante com borda inferior.</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>ou</MarkerContent>
      </Marker>
    </div>
  );
}
Acessibilidade
Ícones decorativos com aria-hidden; texto significativo em MarkerContent.
Importar
import { Marker, MarkerIcon, MarkerContent } from "@financeequity/ui/marker"

Neste repositório:

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