Blaze UI Button Sizes
In this article, we’ll see Blaze UI buttons of different sizes. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc.
The buttons in Blaze UI are available in 6 different sizes and those are discussed below with their classes.
Blaze UI Button Sizes classes:
- c-button u-xsmall- This class is used to create a button in an extra small size.
- c-button u-small- This class is used to create a button in a small size.
- c-button u-medium- This class is used to create a button in a medium size.
- c-button u-large- This class is used to create a button in a large size.
- c-button u-xlarge- This class is used to create a button in an extra-large size.
- c-button u-super- This class is used to create a supersize button.
Syntax:
<button type="button" class="c-button c-button--info"> ... </button>
Example 1: Below example demonstrates the different sizes of buttons in Blaze UI.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Blaze UI</ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </ head > < body > < div class = "u-centered" > < h1 style = "color: green" >w3wiki</ h1 > < h2 >Button Sizes in Blaze UI</ h2 > < button type = "button" class = "c-button u-xsmall" >xsmall</ button > < button type = "button" class = "c-button u-small" >small</ button > < button type = "button" class = "c-button u-medium" >medium</ button > < button type = "button" class = "c-button u-large" >large</ button > < button type = "button" class = "c-button u-xlarge" >xlarge</ button > < button type = "button" class = "c-button u-super" >super</ button > </ div > </ body > </ html > |
Output:
Example 2: Below is another example that demonstrates the different sizes of buttons in Blaze UI.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Blaze UI</ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </ head > < body > < div class = "u-centered" > < h1 style = "color: green" >w3wiki</ h1 > < h2 >Button Sizes in Blaze UI</ h2 > < button type = "button" class = "c-button u-xsmall" > xsmall </ button > < button type = "button" class = "c-button c-button--info u-small" > small </ button > < button type = "button" class = "c-button c-button--success u-medium" > medium </ button > < button type = "button" class = "c-button c-button--warning u-large" > large </ button > < button type = "button" class = "c-button c-button--error u-xlarge" > xlarge </ button > < button type = "button" class = "c-button c-button--brand u-super" > super </ button > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/buttons