Native label and separator constituents for checkpoint notices.
Preview
Example source could not be loaded: marker-example. Reload this page to retry.Usage
A scalar Marker child is automatically wrapped in MarkerContent. variant supports default, separator and border; separatorEdge defaults to header. MarkerContent accepts align and logical maxWidth. MarkerIcon is decorative and aria-hidden, so keep the notice text meaningful without it.
Composition
The bordered notice below combines MarkerIcon and MarkerContent. Separator/border line and label constituents retain their declared cases; custom icons, links and notice arrangements are web compositions, without a native Marker widget claim.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { Label } from "./label";
import type { LabelProps } from "./label";
import {
isMinecraftTextContent,
minecraftClasses as cn,
minecraftStyle,