The Spectre Labels are formatted text tags for highlighting informative information. In this article, we will learn how to create rounded or pill-shaped labels. The default shape of the label is square. We can choose the color of the label by applying the color classes as we all know primary, success, error, etc. To change the color we have to use label color. To create labels you have to add the label class to <span> or <small> elements.
Spectre Labels Rounded labels class:
- label-rounded: This class is used to shape the labels into a pill shaped label.
Syntax:
<span class="label label-rounded label-primary">
primary label
</span>Below example illustrate the Spectre Labels Rounded labels:
Example:
HTML
<!DOCTYPE html> <html>
<head>
<title>SPECTRE CSS Icons Class</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Labels Rounded labels</strong>
<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>
</center>
</body>
</html>
|
Output:
Spectre Labels Rounded labels
Reference: https://picturepan2.github.io/spectre/elements/labels.html#labels-rounded