Blaze UI Button Sizes

Last Updated : 26 Apr, 2022

In this article, we’ll see Blaze UI buttons of different sizes. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc.

The buttons in Blaze UI are available in 6 different sizes and those are discussed below with their classes.

Blaze UI Button Sizes classes:

c-button u-xsmall- This class is used to create a button in an extra small size.
c-button u-small- This class is used to create a button in a small size.
c-button u-medium- This class is used to create a button in a medium size.
c-button u-large- This class is used to create a button in a large size.
c-button u-xlarge- This class is used to create a button in an extra-large size.
c-button u-super- This class is used to create a supersize button.

Syntax:

<button type="button" class="c-button 
    c-button--info">
    ...
</button>

Example 1: Below example demonstrates the different sizes of buttons in Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Blaze UI</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
<body> 
    <div class="u-centered"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h2>Button Sizes in Blaze UI</h2> 
  
        <button type="button" class="c-button u-xsmall">xsmall</button> 
        <button type="button" class="c-button u-small">small</button> 
        <button type="button" class="c-button u-medium">medium</button> 
        <button type="button" class="c-button u-large">large</button> 
        <button type="button" class="c-button u-xlarge">xlarge</button> 
        <button type="button" class="c-button u-super">super</button> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Button Sizes

Example 2: Below is another example that demonstrates the different sizes of buttons in Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Blaze UI</title> 
  <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h2>Button Sizes in Blaze UI</h2> 
  
        <button type="button" class="c-button u-xsmall"> 
            xsmall 
        </button> 
  
        <button type="button" class= 
            "c-button c-button--info u-small"> 
            small 
        </button> 
  
        <button type="button" class= 
            "c-button c-button--success u-medium"> 
            medium 
        </button> 
  
        <button type="button" class= 
            "c-button c-button--warning u-large"> 
            large 
        </button> 
  
        <button type="button" class= 
            "c-button c-button--error u-xlarge"> 
            xlarge 
        </button> 
  
        <button type="button" class= 
            "c-button c-button--brand u-super"> 
            super 
        </button> 
    </div> 
</body> 
  
</html>