Badge

Compact pill-shaped labels for statuses, categories, and counts. Unlike chips, badges are non-interactive — use them for display only. When no content is provided the badge collapses to a circle indicator.

Playground

primary

secondary

success

warning

error

neutral

Controls

Appearance

Variant

Size

Content

Dot

Theme

HTMLReact

ShareCopy

Usage

<lt-badge variant="success" content="Active" />
<lt-badge variant="error" appearance="solid" content="Failed" />
<lt-badge variant="warning" appearance="outlined" content="Pending" />
<lt-badge variant="primary" content="New" dot />

<lt-badge variant="success" />
<lt-badge variant="error" />
<lt-badge variant="warning" />

import { Badge } from '@latty-ds/react';

<Badge variant="success" content="Active" />
<Badge variant="error" appearance="solid" content="Failed" />
<Badge variant="warning" appearance="outlined" content="Pending" />
<Badge variant="primary" content="New" dot />

<Badge variant="success" />
<Badge variant="error" />
<Badge variant="warning" />

<template>
<lt-badge variant="success" content="Active" />
<lt-badge variant="error" appearance="solid" content="Failed" />
<lt-badge variant="warning" appearance="outlined" content="Pending" />
<lt-badge variant="primary" content="New" dot />

<lt-badge variant="success" />
<lt-badge variant="error" />
<lt-badge variant="warning" />
</template>

API