UNPKG

@tabler/core

Version:

Premium and Open Source dashboard template with responsive and high quality UI.

tabler.io

tabler/tabler

119 lines (98 loc) • 4.24 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
--- title: Badges summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info. description: Add extra information with badges. bootstrapLink: components/badge/ --- ## Default markup The default badges are square and come in the basic set of colors. ```html example centered separated <span class="badge bg-blue-lt">Blue</span> <span class="badge bg-azure-lt">Azure</span> <span class="badge bg-indigo-lt">Indigo</span> <span class="badge bg-purple-lt">Purple</span> <span class="badge bg-pink-lt">Pink</span> <span class="badge bg-red-lt">Red</span> <span class="badge bg-orange-lt">Orange</span> <span class="badge bg-yellow-lt">Yellow</span> <span class="badge bg-lime-lt">Lime</span> <span class="badge bg-green-lt">Green</span> <span class="badge bg-teal-lt">Teal</span> <span class="badge bg-cyan-lt">Cyan</span> ``` ## Headings ```html example columns={1} height="20rem" centered <h1>Example heading <span class="badge">New</span> </h1> <h2>Example heading <span class="badge">New</span> </h2> <h3>Example heading <span class="badge">New</span> </h3> <h4>Example heading <span class="badge">New</span> </h4> <h5>Example heading <span class="badge">New</span> </h5> <h6>Example heading <span class="badge">New</span> </h6> ``` ## Outline badges ```html example centered separated <span class="badge badge-outline text-blue">blue</span> <span class="badge badge-outline text-azure">azure</span> <span class="badge badge-outline text-indigo">indigo</span> <span class="badge badge-outline text-purple">purple</span> <span class="badge badge-outline text-pink">pink</span> <span class="badge badge-outline text-red">red</span> <span class="badge badge-outline text-orange">orange</span> <span class="badge badge-outline text-yellow">yellow</span> <span class="badge badge-outline text-lime">lime</span> <span class="badge badge-outline text-green">green</span> <span class="badge badge-outline text-teal">teal</span> <span class="badge badge-outline text-cyan">cyan</span> ``` ## Pill badges Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text. ```html example centered separated <span class="badge badge-pill bg-blue-lt">1</span> <span class="badge badge-pill bg-azure-lt">2</span> <span class="badge badge-pill bg-indigo-lt">3</span> <span class="badge badge-pill bg-purple-lt">4</span> <span class="badge badge-pill bg-pink-lt">5</span> <span class="badge badge-pill bg-red-lt">6</span> <span class="badge badge-pill bg-orange-lt">7</span> <span class="badge badge-pill bg-yellow-lt">8</span> <span class="badge badge-pill bg-lime-lt">9</span> <span class="badge badge-pill bg-green-lt">10</span> <span class="badge badge-pill bg-teal-lt">11</span> <span class="badge badge-pill bg-cyan-lt">12</span> ``` ## Links Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable. ```html example centered separated <a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a> ``` ## Button with badge Badges can be used as part of links or buttons to provide a counter. ``` <button type="button" class="btn"> Notifications <span class="badge bg-red-lt ms-2">4</span> </button> ``` The results can be seen in the example below. ```html example centered separated background="surface" <button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span> </button> <button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span> </button> ```