Caret-Tui

Badge

A component to display a small badge or label.

A simple badge component to display status, tags, or labels. It automatically scales padding and colors based on the active theme.

Usage

import { Badge } from 'caret-tui';

const App = () => (
  <Badge variant="success">Completed</Badge>
);

Props

PropTypeDefaultDescription
childrenstring-The text to display inside the badge.
variant'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline''secondary'The visual style variant of the badge.

On this page