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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < style > button { width: 150px; } div { margin-left: 15%; } </ style > </ head > < body > < center > < h1 class = "ui header green" >w3wiki</ 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:
Example 2: In this example, we will create a label button with color.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < style > button { width: 150px; } div { margin-left: 15%; } </ style > </ head > < body > < center > < h1 class = "ui header green" >w3wiki</ 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:
Reference: https://semantic-ui.com/elements/button.html#labeled