Semantic-UI Button Labeled Type
Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic-UI Button Labeled is one of the most important buttons types of Semantic-UI Button Types. In this article, we will learn about the Semantic-UI Button Labeled type.
Semantic-UI Button Labeled Type Class:
- labeled: It is used to add a label to our button.
Syntax:
<div class="ui left labeled button">
...
</div>
Below examples illustrate the Semantic-UI Button Labeled Type:
Example 1: In this example, we will create a label button without color.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< style >
button {
width: 150px;
}
div {
margin-left: 15%;
}
</ style >
</ head >
< body >
< center >
< h1 class = "ui header green" >Geeksforgeeks</ h1 >
< strong >Semantic-UI Button Labeled Types</ strong >
</ center >
< br >< br >
< div >
< strong >Labeled:</ strong >
< div class = "ui labeled button" >
< div class = "ui button" >
< i class = "heart icon" ></ i > Like
</ div >
< a class = "ui basic left pointing label" >
2,048
</ a >
</ div >
< div class = "ui left labeled button" >
< a class = "ui basic right pointing label" >
2,048
</ a >
< div class = "ui button" >
< i class = "user icon" ></ i >Follower
</ div >
</ div >
< div class = "ui left labeled button" >
< a class = "ui basic right pointing label" >
1,048
</ a >
< div class = "ui icon button" >
< i class = "fork icon" ></ i >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Button Labeled Type
Example 2: In this example, we will create a label button with color.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< style >
button {
width: 150px;
}
div {
margin-left: 15%;
}
</ style >
</ head >
< body >
< center >
< h1 class = "ui header green" >Geeksforgeeks</ h1 >
< strong >Semantic-UI Button Labeled Types</ strong >
</ center >
< br >< br >
< div >
< strong >Labeled:</ strong >
< div class = "ui labeled button" tabindex = "0" >
< div class = "ui red button" >
< i class = "heart icon" ></ i > Like
</ div >
< a class = "ui basic left pointing label" >
2,048
</ a >
</ div >
< div class = "ui left labeled button" >
< a class = "ui basic right pointing label" >
2,048
</ a >
< div class = "ui button" >
< i class = "user icon" ></ i >Follower
</ div >
</ div >
< div class = "ui left labeled button" >
< a class = "ui basic right pointing label" >
1,048
</ a >
< div class = "ui icon blue button" >
< i class = "fork icon" ></ i >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Button Labeled Type
Reference: https://semantic-ui.com/elements/button.html#labeled
Last Updated :
16 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...