Skip to main content

Badge

Small status or label indicators.

Import​

import '@kittl/ui';
import { Badge } from '@kittl/ui-react';

Usage​

<kittl-badge>Default</kittl-badge>
<kittl-badge variant="critical">Error</kittl-badge>
<kittl-badge variant="highlight" size="s">New</kittl-badge>
import { Badge } from '@kittl/ui-react';

/** Basic Badge usage, rendered live on the docs site. */
export const BadgeUsage = () => (
  <>
    <Badge>Default</Badge>
    <Badge variant="critical">Error</Badge>
    <Badge variant="highlight" size="s">
      New
    </Badge>
  </>
);

Props​

PropertyAttributeTypeDefaultDescription
variantvariant'soft-info' | 'info' | 'highlight' | 'critical' | 'neutral' | 'neutral-strong' | 'ghost''soft-info'Visual style
sizesize's' | 'm''m'Badge size