Skip to content
Related Articles

Related Articles

Blaze UI Button Sizes

Improve Article
Save Article
  • Last Updated : 26 Apr, 2022
Improve Article
Save Article

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=
</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=
</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>


Output:

Blaze UI Button Sizes

Reference: https://www.blazeui.com/components/buttons


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!