Getting Started

Installation Configuration

Components

Alert Badge Button Card Dialog Dropdown Icon Menu Table Tile Toggle Tooltip Typography

Badges

Using Badges

Use <ui:badge> to create a badge of the default variant (solid) and color (secondary).

Using Badges
Copied!
Hello Badge 
1<ui:badge>Hello Badge</ui:badge>
1<ui:badge>Hello Badge</ui:badge>

Properties

Badges support several properties that can be used to customize their appearance. Here's an overview of all the available properties:

Property Type Default Description
color string | Color secondary The color of the badge.
size string | Size sm The size of the badge.
variant string | Variant solid The variant of the badge.
radius string | Size sm The border radius of the badge.
icon string null The icon to display before the badge text.
iconAfter string null The icon to display after the badge text.
iconVariant string micro The variant of the icon.
href string null The URL the badge should link to, making it an anchor element.

Linkable Badges

You can make a badge act as a link by using the href prop. This will render the badge as an <a> element.

Linkable Badges
Copied!
Visit Example Primary Link 
1<ui:badge href="#happy-little-link">Visit Example</ui:badge>
2<ui:badge href="#happy-little-link" color="primary">Primary Link</ui:badge>
1<ui:badge href="#happy-little-link">Visit Example</ui:badge>
2<ui:badge href="#happy-little-link" color="primary">Primary Link</ui:badge>

Colors

Badges support colors primary, secondary (default), success, warning, and danger. The color prop accepts a string or a Color enum to define this value.

Badge Colors
Copied!
Primary Secondary Success Warning Danger 
1<ui:badge color="primary">Primary</ui:badge>
2<ui:badge color="secondary">Secondary</ui:badge>
3<ui:badge color="success">Success</ui:badge>
4<ui:badge color="warning">Warning</ui:badge>
5<ui:badge color="danger">Danger</ui:badge>
1<ui:badge color="primary">Primary</ui:badge>
2<ui:badge color="secondary">Secondary</ui:badge>
3<ui:badge color="success">Success</ui:badge>
4<ui:badge color="warning">Warning</ui:badge>
5<ui:badge color="danger">Danger</ui:badge>

Icons

Easily add an Icon before the badge's text with the icon prop.

1<ui:badge icon="arrow-left">Icon Example</ui:badge>
1<ui:badge icon="arrow-left">Icon Example</ui:badge>
Copied!

You can also add an icon after the badge's text with the icon-after prop.

1<ui:badge icon-after="arrow-right">Icon Example</ui:badge>
1<ui:badge icon-after="arrow-right">Icon Example</ui:badge>
Copied!
Badges with Icons
Copied!
Icon Before Why Not Both? Icon After 
1<ui:badge icon="arrow-left">Icon Before</ui:badge>
2<ui:badge icon="arrow-left" icon-after="arrow-right">Why Not Both?</ui:badge>
3<ui:badge icon-after="arrow-right">Icon After</ui:badge>
1<ui:badge icon="arrow-left">Icon Before</ui:badge>
2<ui:badge icon="arrow-left" icon-after="arrow-right">Why Not Both?</ui:badge>
3<ui:badge icon-after="arrow-right">Icon After</ui:badge>

Sizing

Badges support sizes xs, sm (default), md, and lg.

Badge Sizing
Copied!
Badge
xs
Badge
sm
Badge
md
Badge
lg
 1<div class="text-center">
 2    <ui:badge size="xs">Badge</ui:badge>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 4</div>
 5<div class="text-center">
 6    <ui:badge size="sm">Badge</ui:badge>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:badge size="md">Badge</ui:badge>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:badge size="lg">Badge</ui:badge>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>
 1<div class="text-center">
 2    <ui:badge size="xs">Badge</ui:badge>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 4</div>
 5<div class="text-center">
 6    <ui:badge size="sm">Badge</ui:badge>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
 8</div>
 9<div class="text-center">
10    <ui:badge size="md">Badge</ui:badge>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
12</div>
13<div class="text-center">
14    <ui:badge size="lg">Badge</ui:badge>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
16</div>

Radius

Control the border radius with these options: none, xs, sm (default), md, lg, xl, and full.

Badge Corner Radius
Copied!
Badge
none
Badge
xs
Badge
sm
Badge
md
Badge
lg
Badge
xl
Badge
full
 1<div class="text-center">
 2    <ui:badge radius="none">Badge</ui:badge>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">none</div>
 4</div>
 5<div class="text-center">
 6    <ui:badge radius="xs">Badge</ui:badge>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 8</div>
 9<div class="text-center">
10    <ui:badge radius="sm">Badge</ui:badge>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
12</div>
13<div class="text-center">
14    <ui:badge radius="md">Badge</ui:badge>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
16</div>
17<div class="text-center">
18    <ui:badge radius="lg">Badge</ui:badge>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
20</div>
21<div class="text-center">
22    <ui:badge radius="xl">Badge</ui:badge>
23    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
24</div>
25<div class="text-center">
26    <ui:badge radius="full">Badge</ui:badge>
27    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">full</div>
28</div>
 1<div class="text-center">
 2    <ui:badge radius="none">Badge</ui:badge>
 3    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">none</div>
 4</div>
 5<div class="text-center">
 6    <ui:badge radius="xs">Badge</ui:badge>
 7    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xs</div>
 8</div>
 9<div class="text-center">
10    <ui:badge radius="sm">Badge</ui:badge>
11    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">sm</div>
12</div>
13<div class="text-center">
14    <ui:badge radius="md">Badge</ui:badge>
15    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">md</div>
16</div>
17<div class="text-center">
18    <ui:badge radius="lg">Badge</ui:badge>
19    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">lg</div>
20</div>
21<div class="text-center">
22    <ui:badge radius="xl">Badge</ui:badge>
23    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">xl</div>
24</div>
25<div class="text-center">
26    <ui:badge radius="full">Badge</ui:badge>
27    <div class="text-sm uppercase tracking-wide opacity-60 mt-1.5">full</div>
28</div>

Variant

Badges come in two variants: solid (default) and outline.

Solid Variant
Copied!
Primary Secondary Success Warning Danger 
1<ui:badge color="primary">Primary</ui:badge>
2<ui:badge color="secondary">Secondary</ui:badge>
3<ui:badge color="success">Success</ui:badge>
4<ui:badge color="warning">Warning</ui:badge>
5<ui:badge color="danger">Danger</ui:badge>
1<ui:badge color="primary">Primary</ui:badge>
2<ui:badge color="secondary">Secondary</ui:badge>
3<ui:badge color="success">Success</ui:badge>
4<ui:badge color="warning">Warning</ui:badge>
5<ui:badge color="danger">Danger</ui:badge>
Outline Variant
Copied!
Primary Secondary Success Warning Danger 
1<ui:badge color="primary" variant="outline">Primary</ui:badge>
2<ui:badge color="secondary" variant="outline">Secondary</ui:badge>
3<ui:badge color="success" variant="outline">Success</ui:badge>
4<ui:badge color="warning" variant="outline">Warning</ui:badge>
5<ui:badge color="danger" variant="outline">Danger</ui:badge>
1<ui:badge color="primary" variant="outline">Primary</ui:badge>
2<ui:badge color="secondary" variant="outline">Secondary</ui:badge>
3<ui:badge color="success" variant="outline">Success</ui:badge>
4<ui:badge color="warning" variant="outline">Warning</ui:badge>
5<ui:badge color="danger" variant="outline">Danger</ui:badge>
Like this project? Stop by the bear cave to stargaze.