Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Badge

Use badges to add metadata or indicate the status of items.

Usage 

Badge
<ui:Badge>Badge</ui:Badge>

Variants 

Outline Info Option Success Warning Critical Accent
<ui:Badge var="outline">Outline</ui:Badge>
<ui:Badge var="info">Info</ui:Badge>
<ui:Badge var="option">Option</ui:Badge>
<ui:Badge var="success">Success</ui:Badge>
<ui:Badge var="warning">Warning</ui:Badge>
<ui:Badge var="critical">Critical</ui:Badge>
<ui:Badge var="accent">Accent</ui:Badge>

Sizes 

Mini Small Medium Large XLarge
<ui:Badge size="mini">Mini</ui:Badge>
<ui:Badge size="small">Small</ui:Badge>
<ui:Badge>Medium</ui:Badge>
<ui:Badge size="large">Large</ui:Badge>
<ui:Badge size="xlarge">XLarge</ui:Badge>

Component arguments 

Badge 

ArgumentTypeDescription
var str Optional. The variant of the alert. Can be one of: info, success, warning, critical, option, or accent.
size str Optional. The size of the badge. Can be one of: small, medium, large, or xlarge. Default is medium.

Components 

Component
File
Source
Badge
badge.jinja
badge.css