Edge Label
Etiquette d'arete en ligne pour la semantique des relations comme les flux, les transferts ou les politiques. Installez Edge Label depuis le registre VLLNT UI avec la CLI shadcn.
Etiquette d'arete en ligne pour la semantique des relations comme les flux, les transferts ou les politiques. Fait partie de la famille overlay dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Edge Label a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/edge-label.jsonSource
import { cn } from "../../lib/utils";
export type EdgeLabelProps = React.ComponentPropsWithoutRef<"span"> & {
emphasis?: "active" | "subtle";
};
const emphasisClasses: Record<
NonNullable<EdgeLabelProps["emphasis"]>,
string
> = {
active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
subtle: "border-border/60 bg-background/90 text-muted-foreground",
};
const EdgeLabel = ({
className,
emphasis = "subtle",
ref,
...props
}: EdgeLabelProps & { ref?: React.Ref<HTMLSpanElement> }) => (
<span
className={cn(
"inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
emphasisClasses[emphasis],
className,
)}
data-emphasis={emphasis}
ref={ref}
{...props}
/>
);
EdgeLabel.displayName = "EdgeLabel";
export { EdgeLabel };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.