Semantic-UI Button Compact Variations

Last Updated : 29 Jan, 2022

Semantic UI Button offers several types of micro button components like Types, Groups, Content, States, Variations, and Group Variations.

The Button variations have different kinds of buttons such as Social, Different Size, Floated, Colored, Compact, Toggle, Positive, Negative, Fluid, Circular, Vertically and Horizontally attached buttons. In this article, we will learn about the

Semantic-UI Button Variations Compact Buttons Class:

compact: This class is used to make the button compact.

Syntax:

<button class="compact ui button">
  ...
</button>

Below example illustrates the Semantic-UI Button Variations Compact Buttons:

Example:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Semantic UI</title> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    </head> 
    <body> 
        <center> 
            <h1>GeeksforGeeks</h1> 
            <strong>Semantic UI Button Variations Compact Buttons</strong> 
            <br><br> 
            <strong>Compact Buttons:</strong> 
            <button class="ui compact blue button"> 
              Sell 
            </button> 
            <button class="ui compact green button"> 
              Buy 
            </button> 
            <br><br> 
            <strong>Compact labeled icon Buttons:</strong> 
            <button class="ui compact labeled icon button"> 
              <i class="play icon"></i> 
              Pause 
            </button> 
            <button class="ui compact labeled icon button"> 
              <i class="pause icon"></i> 
              Pause 
            </button> 
              
  
        </center> 
    </body> 
</html>