Spectre Labels are formatted text tags for highlighting informative text. These labels are normally rectangle-shaped. However, we can change the shape of the labels to rounded ones with the help of Spectre Labels Rounded labels.
Spectre Labels Type:
- Spectre Labels Rounded: This is rounded labels, it has been used to create pill/rounded shaped pills.
Spectre Labels Classes:
- label: This class is used to create the default rectangle-shaped labels.
- label-rounded: This class is used to shape the labels into a pill-shaped label.
Syntax:
<span class="label ...></span>
The below example illustrates the Spectre Labels:
Example 1: In this example, we will create default labels in multiple colors.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE labels</strong>
</center>
<br><br>
<div>
<div>
<strong><u>Labels on span Elements:</u></strong>
<br>
<span class="label">
Default label
</span>
<span class="label label-primary">
Primary label
</span>
<span class="label label-success">
Success label
</span>
<span class="label label-error">
Error label
</span>
<span class="label label-warning">
Warning label
</span>
</div>
<br>
<div>
<strong><u>Labels on small Elements:</u></strong>
<br>
<small class="label">
Default label
</small>
<small class="label label-primary">
Primary label
</small>
<small class="label label-success">
Success label
</small>
<small class="label label-error">
Error label
</small>
<small class="label label-warning">
Warning label
</small>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will create rounded labels in multiple colors.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Labels Rounded labels</strong>
</center>
<br><br>
<div>
<div>
<strong><u>Labels on span Elements:</u></strong>
<br>
<span class="label label-rounded">
Default label
</span>
<span class="label label-rounded
label-primary">
Primary label
</span>
<span class="label label-rounded
label-success">
Success label
</span>
<span class="label label-rounded
label-error">
Error label
</span>
<span class="label label-rounded
label-warning">
Warning label
</span>
</div>
<br>
<div>
<strong><u>Labels on small Elements:</u></strong>
<br>
<small class="label label-rounded">
Default label
</small>
<small class="label label-rounded
label-primary">
Primary label
</small>
<small class="label label-rounded
label-success">
Success label
</small>
<small class="label label-rounded
label-error">
Error label
</small>
<small class="label label-rounded
label-warning">
Warning label
</small>
</div>
</div>
</body>
</html>
Output:
Reference: https://picturepan2.github.io/spectre/elements/labels.html