Skip to content
Related Articles

Related Articles

Semantic-UI Button Group Variations Vertical Buttons

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Feb, 2022

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 Vertical Buttons.

Semantic-UI Button Group Variations Vertical Buttons Class:

  • vertical: This class is used to set the button into vertical mode.

Syntax:

<div class="ui vertical buttons">
  <button class="ui button">...</button>
  <button class="ui button">...</button>
  ....
</div>

Below example illustrate the Button Variations:

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 Vertical Buttons</strong>
            <br><br>
            <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>
        </center>
    </body>
</html>


Output: 

Semantic-UI Button Group Variations Vertical Buttons

Semantic-UI Button Group Variations Vertical Buttons 

Reference: https://semantic-ui.com/elements/button.html#vertical-buttons


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!