FeedbackDisponible

Marker

Marcador compacto que combina un icono y texto breve.

Reviewed

Draft

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/marker.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { Marker, MarkerIcon, MarkerContent } from '@/components/ui/marker';
import { CheckIcon as Check } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Marker>
        <MarkerIcon>
          <Check weight="bold" aria-hidden="true" />
        </MarkerIcon>
        <MarkerContent>Reviewed</MarkerContent>
      </Marker>
      <Marker variant="border">
        <MarkerContent>Draft</MarkerContent>
      </Marker>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
className	string	?	Extends the root visual styles without changing its semantics.
children	ReactNode	?	Compose the exported subcomponents as shown in the runnable example.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.