The Badge component wraps around its content and remains as is, regardless of its enclosing container.
import { Badge } from "@smartacteam/ui/badge";
<Badge variant="outline">Badge</Badge>
A badge is a static visual label or indicator used to convey status or highlight content.
The Primary Badge is designed to emphasize small details or draw attention to key information, without implying a sense of urgency. It can include an icon that relates to its context.
Primary (default)base-tertiary assigned to it. base-foreground assigned to its icon & text. The Secondary Badge is designed to bring more color to emphasize small details or draw attention to key information, without implying a sense of urgency. It can include an icon that relates to its context.
base-accent assigned to it. base-accent-foreground assigned to its icon & text. Outlinebase-tertiary assigned to its border color. base-foreground assigned to its icon & text. A Confirmation Badge is a type of badge used to indicate a positive, confirmation, or completed action. It can include an icon such as a checkmark, a check circle icon, or other symbols commonly associated with confirmation.
Confirmationbase-confirmation assigned to it. base-confirmation-foreground assigned to its icon & text. Confirmation Outlinebase-confirmation assigned to its border color. base-foreground assigned to its icon & text. A Warning Badge is a type of badge used to convey caution or alert users about potential issues that require attention but may not necessarily be critical or error-related. It can include an icon such as an exclamation mark, triangle, or other symbols commonly associated with warnings.
Warningbase-warning assigned to it. base-warning-foreground assigned to its icon & text. Warning Outlinebase-warning assigned to its border color. base-foreground assigned to its icon & text. A Destructive Badge is a notification designed to convey a critical issue that requires immediate attention or action. It can include an icon such as an exclamation mark, a stop sign, or other symbols commonly associated with errors.
Destructivebase-destructive assigned to it. base-destructive-foreground assigned to its icon & text. Destructive Outlinebase-destructive assigned to its border color. base-foreground assigned to its icon & text.