Blaze UI Buttons
Last Updated :
10 May, 2022
Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that 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. Its project is available open-source so a large community maintains it.
Blaze UI Buttons provide beautiful buttons which are very customizable. We can have rounded buttons, button groups, and different sizes of buttons, including full-size buttons as well as ghost buttons. The buttons are the most important part of websites and blaze UI buttons are very useful.
Blaze UI Button Types:
- Basic Button: This is the simplest type of button in the blaze UI which can be customized to have different colors.
- Button Colors: This type of button is a colored button.
- Button Groups: This is used to group two or more buttons together so that they don’t have a margin in between.
- Full-width Buttons: This type of button takes the full available width of the screen or container where it is placed.
- Ghost Buttons: This type of button doesn’t have a background color but the text is colored. Also, the buttons have a boundary. The color of the text and the boundary can be modified.
- Rounded Buttons: This type of button has rounded corners at the vertices. The rounded corners can be applied to all the types of buttons above.
Blaze UI Buttons Classes:
- c-button: This is used to specify it as button UI.
- sizes: The following sizes can be used for the buttons.
- u-xsmall
- u-small
- u-medium
- u-large
- u-xlarge
- u-super
- c-button–block: This is used to create full-width buttons.
- c-button–ghost: This is used to create transparent background buttons.
- c-button–rounded: This is used to create rounded cornered buttons.
- c-button–active: This is used to set the button in an active state.
- colors: The following classes are used for the different colors:
- c-button–default
- c-button–brand
- c-button–info
- c-button–warning
- c-button–success
- c-button–error
Syntax:
<button type="button" class="c-button
Blaze-UI-Buttons-Class">
...
</button>
Example 1: In the following example, we have a set of basic buttons of different colors that when clicked show alerts.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br> <br>
<div style="display: flex; justify-content: space-evenly;">
<button onclick="showAlert('Default')"
class="c-button u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--error u-small">
Error
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
|
Output:
Blaze UI Buttons
Example 2: In the following example, we have a ghost and rounded types of buttons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br> <br>
<div style="display: flex; justify-content: space-evenly;">
<button onclick="showAlert('Default')"
class="c-button c-button--rounded
c-button--ghost u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--rounded
c-button--ghost
c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--rounded
c-button--ghost
c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--rounded
c-button--ghost
c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--rounded
c-button--ghost
c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--rounded
c-button--ghost
c-button--error u-small">
Error
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
|
Output:
Blaze UI Buttons
Example 3: In the following example, we have button groups and we can toggle to have sharp or rounded corner buttons in the button group. The Button group has all buttons without any spacing in between.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<button class="c-button c-button--warning"
onclick="toggleRounded()">
Toggle Rounded
</button>
<br /> <br />
<span style="margin: auto; width: fit-content;"
class="c-input-group">
<button onclick="showAlert('Default')"
class="c-button u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--error u-small">
Error
</button>
</span>
</center>
</div>
<script>
const toggleRounded = () => {
$('span').toggleClass('c-input-group--rounded')
}
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
|
Output:
Example 4: In the following example, we have different widths of buttons with different colors which when clicked show an alert.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<div>
<button onclick="showAlert('xsmall')"
class="c-button c-button--brand u-xsmall">
xsmall
</button>
<button onclick="showAlert('small')"
class="c-button c-button--info u-small">
small
</button>
<button onclick="showAlert('medium')"
class="c-button c-button--warning u-medium">
medium
</button>
<button onclick="showAlert('large')"
class="c-button c-button--success u-large">
large
</button>
<button onclick="showAlert('xlarge')"
class="c-button c-button--error u-xlarge">
xlarge
</button>
<button onclick="showAlert('super')"
class="c-button u-super">
super
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The size of button is ${message} type.`)
}
</script>
</body>
</html>
|
Output:
Example 5: In the following example, we have full-width buttons of different sizes. A full-width button takes the whole width of the screen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<div>
<button onclick="showAlert('xsmall')"
class="c-button c-button--block
c-button--brand u-xsmall">
xsmall
</button>
<button onclick="showAlert('small')"
class="c-button c-button--block
c-button--info u-small">
small
</button>
<button onclick="showAlert('medium')"
class="c-button c-button--block
c-button--warning u-medium">
medium
</button>
<button onclick="showAlert('large')"
class="c-button c-button--block
c-button--success u-large">
large
</button>
<button onclick="showAlert('xlarge')"
class="c-button c-button--block
c-button--error u-xlarge">
xlarge
</button>
<button onclick="showAlert('super')"
class="c-button c-button--block
u-super">
super
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The size of button is ${message} type.`)
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/buttons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...