Skip to main content

Badge

Small status or label indicators.

Preview
Loading preview…

Import​

// Web Component
import '@kittl/ui';

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

Usage​

Web Component​

<kittl-badge>Default</kittl-badge>
<kittl-badge variant="critical">Error</kittl-badge>
<kittl-badge variant="highlight" size="s">New</kittl-badge>

React​

<Badge>Default</Badge>
<Badge variant="critical">Error</Badge>
<Badge variant="highlight" size="s">New</Badge>

Props​

PropertyTypeDefaultDescription
variant'soft-info' | 'info' | 'highlight' | 'critical' | 'neutral' | 'neutral-strong' | 'ghost''soft-info'Visual style
size's' | 'm''m'Badge size