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 Group also offers a group variation of buttons, there are Icon buttons, labelled icon buttons, mixed group buttons, equal width, coloured buttons, basics buttons, Group sizes buttons, etc.
Semantic UI Button Group Variations Classes:
- Vertical Buttons: This class is used to set button groups formatted to appear vertically.
- Icon Buttons: This class is used to set button groups formatted as icons.
- Labeled Icon Buttons: This class is used to set button groups formatted as labelled icons.
- Mixed Group: This class is used to set button groups formatted to use multiple button types together.
- Equal Width: This class is used to set button groups that can have their widths divided evenly.
- Colored Buttons: This class is used to set button groups that can have a shared colour.
- Basic Buttons: This class is used to set button groups that can be less pronounced.
- Group Sizes: This class is used to set button groups that can have a shared size.
Syntax:
<div class="ui Group-Variations-Class"> <button class="ui button">...</button> <! this is where you want to use icons> <button class="ui button"> <i class="...."></i> </button> </div>
The below example will illustrate the Semantic-UI Button Group Variations:
Example:
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
< style >
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
}
</ style >
</ head >
< body >
< center >
< h1 >Geeksforgeeks</ h1 >
< strong >Semantic UI Button Group Variations</ strong >
</ center >
< br >< br >
< div class = "container" >
< div >
< strong >Vertical Buttons:</ strong >
< div class = "ui vertical buttons" >
< button class = "ui button" >Feed</ button >
< button class = "ui button" >Messages</ button >
< button class = "ui button" >Events</ button >
</ div >
</ div >
< br >
< div >
< strong >Icon Buttons:</ strong >
< div class = "ui icon buttons" >
< button class = "ui button" >
< i class = "like red icon" ></ i >
</ button >
< button class = "ui button" >
< i class = "pause green icon" ></ i >
</ button >
< button class = "ui button" >
< i class = "share blue icon" ></ i >
</ button >
</ div >
</ div >
< br >
< div >
< strong >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 >
< br >
< div >
< strong >Mixed Group:</ strong >
< div class = "ui green buttons" >
< button class = "ui labeled icon button" >
< i class = "left chevron icon" ></ i >
Previous
</ button >
< button class = "ui button" >
< i class = "play icon" ></ i >
Play
</ button >
< button class = "ui right labeled icon button" >
Next
< i class = "right chevron icon" ></ i >
</ button >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
< style >
button {
width: 170px;
}
.container {
width: 600px;
margin-left: 10%;
margin-right: 10%;
}
</ style >
</ head >
< body >
< center >
< h1 >Geeksforgeeks</ h1 >
< strong >Semantic UI Button Group Variations</ strong >
</ center >
< br >< br >
< div class = "container" >
< div >
< strong >Equal Width:</ strong >< br >
< div class = "three ui buttons" >
< button class = "ui red button" >
Like
</ button >
< button class = "ui yellow button" >
Share
</ button >
< button class = "ui purple button" >
Subscribe
</ button >
</ div >
< div class = "two ui buttons" >
< button class = "ui blue button" >
Sell
</ button >
< button class = "ui green button" >
Buy
</ button >
</ div >
</ div >
< br >
< div >
< strong >Colored Buttons:</ strong >
< div class = "ui green buttons" >
< button class = "ui button" >
Like
</ button >
< button class = "ui button" >
Share
</ button >
< button class = "ui button" >
Subscribe
</ button >
</ div >
</ div >
< br >
< div >
< strong >Basic Buttons:</ strong >
< div class = "ui basic buttons" >
< button class = "ui button" >
Like
</ button >
< button class = "ui button" >
Share
</ button >
< button class = "ui button" >
Subscribe
</ button >
</ div >
</ div >
< br >
< div >
< strong >Group Sizes:</ strong >
< br >
< div class = "ui small blue buttons" >
< button class = "ui button" >
Small Like
</ button >
< button class = "ui button" >
Small Share
</ button >
< button class = "ui button" >
Small Subscribe
</ button >
</ div >
< br >< br >
< div class = "ui large green buttons" >
< button class = "ui button" >
large Like
</ button >
< button class = "ui button" >
large Share
</ button >
< button class = "ui button" >
large Subscribe
</ button >
</ div >
</ div >
< br >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/button.html