Open In App

Blaze UI Button Groups

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Blaze UI Button Groups is used to create the group of the related buttons together using the c-input-group class. When we group the buttons, then the space between them will be removed. In this article, we will discuss Blaze UI Button Groups.

Blaze UI Button Groups Class:

  • c-input-group: This class is used to create the buttons group.

Syntax:

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

Example 1: This example demonstrates the Blaze UI Button Groups using default buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Button Groups </title>
    <link rel="stylesheet" href=
</head>
  
<body class="u-pillar-box-small">
    <h1 style="color: green;"
        GeeksforGeeks 
    </h1>
    <h3> Blaze UI Button Groups </h3
  
    <span class="c-input-group">
        <button type="button" class="c-button">
            GFG Button 1
        </button>
  
        <button type="button" class="c-button">
            GFG Button 2
        </button>
  
        <button type="button" class="c-button">
            GFG Button 3
        </button>
    </span>
</body>
  
</html>


Output:

Blaze UI Button Groups

Example 2: This example demonstrates the Blaze UI Button Groups using colored buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Button Groups </title>
    <link rel="stylesheet" href=
</head>
  
<body class="u-pillar-box-small">
    <h1 style="color: green;"
        GeeksforGeeks 
    </h1>
    <h3> Blaze UI Button Groups </h3
  
    <span class="c-input-group">
        <button type="button" class="c-button 
                              c-button--brand">
            GFG Button 1
        </button>
  
        <button type="button" class="c-button 
                              c-button--info">
            GFG Button 2
        </button>
  
        <button type="button" class="c-button 
                              c-button--warning">
            GFG Button 3
        </button>
    </span>
</body>
  
</html>


Output:

Blaze UI Button Groups

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



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