@nathan3boss/ui

    Badge

    The Badge component highlights short labels such as state, category, or metadata.

    Usage

    Featured
    import React from 'react';
import { Badge } from '@nathan3boss/ui/badge';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame>
      <Badge>Featured</Badge>
    </ExampleFrame>
  );
};

    Variants

    FeaturedArtifactAvailableArchive
    import React from 'react';
import { Badge } from '@nathan3boss/ui/badge';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame direction="row" gap="12px" wrap>
      <Badge>Featured</Badge>
      <Badge variant="solid" color="warning">
        Artifact
      </Badge>
      <Badge variant="outline" color="success">
        Available
      </Badge>
      <Badge color="neutral">Archive</Badge>
    </ExampleFrame>
  );
};

    API

    Badge

    Displays short status labels and metadata with compact visual emphasis.

    PropertyDescriptionTypeDefault Value
    colorSelects the semantic color palette applied to the badge.BadgeColor | undefineddefault
    sizeControls the spacing and typography scale.BadgeSize | undefinedmd
    variantDefines the surface treatment used by the badge.BadgeVariant | undefinedsoft