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.
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/
Please Login to comment...