Semantic UI Button offers several type of micro button component like Types, Groups, Content, States, Variations and Group Variations.
The Button group variations have different kind of buttons such as Vertical, Icon, Labeled, Mixed Group, Equal Width, Colored, Basic and different sizes buttons in group variations. In this article we will learn Button Group Variations Labeled Icon Buttons.
Semantic-UI Button Group Variations Labeled Icon Buttons Class:
- labeled icon: This class used to include the labeled icon in the button of groups.
Syntax:
<div class="ui labeled icon buttons">
<button class="ui button">
<i class=""></i>
</button>
</div>Below example illustrate the Button Variations Group Labeled Icon:
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Button Group Variations labeled Icon Buttons</strong>
<br><br>
<div>
<strong>Labeled Icon Buttons:</strong>
<div class="ui labeled icon buttons">
<button class="ui red button">
<i class="like icon"></i>
Like
</button>
<button class="ui green button">
<i class="play icon"></i>
Play
</button>
<button class="ui blue button">
<i class="shuffle icon"></i>
Shuffle
</button>
</div>
<br><br>
<strong>Vertical Labeled Icon Buttons:</strong>
<div class="ui vertical labeled icon buttons">
<button class="ui red button">
<i class="like icon"></i>
Like
</button>
<button class="ui green button">
<i class="play icon"></i>
Play
</button>
<button class="ui blue button">
<i class="shuffle icon"></i>
Shuffle
</button>
</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Button Group Variations Labeled Icon Buttons
Reference: https://semantic-ui.com/elements/button.html#labeled-icon-buttons