Badge
Короткая метка статуса, тега или счётчика.
Живой код — редактируйте
<> <Badge>Нейтральный</Badge> <Badge variant="accent">Новый</Badge> <Badge variant="success">Горячий лид</Badge> <Badge variant="warning">Нужна оплата</Badge> <Badge variant="critical">Бот</Badge> </>
Типы
subtle — заливка, accent — насыщенная заливка, inline — без фона, для строк текста.
Живой код — редактируйте
<div className="flex flex-col gap-3"> <div className="flex gap-2"> <Badge type="subtle" variant="success"> subtle </Badge> <Badge type="accent" variant="success"> accent </Badge> <Badge type="inline" variant="success"> inline </Badge> </div> <div className="flex gap-2"> <Badge size="sm" variant="accent" icon={CheckFillIcon}> sm с иконкой </Badge> <Badge variant="warning" icon={TimeLineIcon}> default с иконкой </Badge> </div> </div>
Пропсы
Prop
Type