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/