BrutalLab UI
en
EnglishEspañol
FeedbackAvailable

Marker

A compact visual marker pairing an icon and short text.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • A surface or content, not a control by default. No artificial hover, pressed or focus state.
  • Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
classNamestring?Extends the root visual styles without changing its semantics.
childrenReactNode?Compose the exported subcomponents as shown in the runnable example.

Accessibility

Rules that should remain intact when adapting the component to a product.

Include text that explains the marker instead of relying on its icon or color.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.