Open In App

Blaze UI Input Group Buttons

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI Button Group offers categorized button groups that allow to group buttons along the same line horizontally. To create a Blaze UI button group, we use the .c-input-group class on a <span> wrapping element. This connects the buttons together and removes the spacing between them. We can also create a pill-shaped rounded corner button group in blaze UI by using the .c-input-group–rounded class on wrapper <span> element.

Blaze UI button group class:

  • .c-input-group: This class converts the nested buttons into a button group with no spacing between them.

Syntax:

<span class="c-input-group">
    <button></button> 
</span>

Example 1: This example demonstrates the basic button group in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Button Groups</strong>
        <br>
        <span class="c-input-group">
            <button type="button" 
                    class="c-button c-button--brand">
                Button 1
            </button>
            <button type="button" 
                    class="c-button c-button--error">
                Button 2
            </button>
            <button type="button" 
                    class="c-button c-button--warning">
                Button 3
            </button>
            <button type="button" 
                    class="c-button c-button--info">
                Button 4
            </button>
            <button type="button" 
                    class="c-button c-button--success">
                Button 5
            </button>
        </span>
    </center>
</body>
</html>


Output:

Output

Example 2: This example demonstrates the pill-shaped button group in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Button Groups</strong>
        <br>
        <span class="c-input-group c-input-group--rounded">
            <button type="button" 
                    class="c-button c-button--brand">
                Button 1
            </button>
            <button type="button" 
                    class="c-button c-button--error">
                Button 2
            </button>
            <button type="button" 
                    class="c-button c-button--warning">
                Button 3
            </button>
            <button type="button" 
                    class="c-button c-button--info">
                Button 4
                /button>
            <button type="button" 
                    class="c-button c-button--success">
                Button 5
            </button>
        </span>
    </center>
</body>
</html>


Output:

Output

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



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads