Blaze UI Input Group Buttons

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.

Output:

👁 Image

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

Output:

👁 Image

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