Button Component #

Description #

The Button component is a fundamental UI element that allows users to trigger actions or events. It supports various styles including solid, outline, and icon buttons, with different colors and sizes.

Examples and Classes #

Basic Example

            

                Primary
                Secondary
                Success
                Danger
                Warning
                Information
                Link
            
            

                
                
HTML
                
            
            <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-link">Link</button>
        

Outline Example

            

                Primary
                Secondary
                Success
                Danger
                Warning
                Info
            
            

                
                
HTML
                
            
            <button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary title-text-color">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
        

Icon Example

            

                
                    Info
                
                
                    Like
                
                
                    Success
                
            
            

                
                
HTML
                
            
            <button type="button" class="btn btn-outline-info">
    <i class="fa-solid fa-circle-info"></i><span>Info</span>
</button>
<button type="button" class="btn btn-outline-warning">
    <i class="fa-solid fa-thumbs-up"></i><span>Like</span>
</button>
<button type="button" class="btn btn-outline-success bg-success-light-color">
    <i class="fa-solid fa-check-circle"></i><span>Success</span>
</button>
        

Round Example

            

                
                    
                    Info
                
            
            

                
                
HTML
                
            
            <button type="button" class="btn btn-round btn-outline-info">
    <i class="fa-solid fa-circle-info"></i>
    <span>Info</span>
</button>
        

Available Classes

Class	Description
.btn	Base class for all buttons
.btn-primary	Primary button style
.btn-secondary	Secondary button style
.btn-success	Success button style
.btn-danger	Danger button style
.btn-warning	Warning button style
.btn-info	Information button style
.btn-link	Link-style button
.btn-outline-*	Outline variant of any button color
.btn-round	Fully rounded button corners
.btn-sm	Small button size
.btn-lg	Large button size

Layout Variations

The button component supports different layout variations:

• Solid Buttons: Filled background with contrasting text
• Outline Buttons: Transparent background with colored border
• Icon Buttons: Buttons with icons and optional text
• Round Buttons: Fully rounded corners for a softer look

File Locations #

Type	Path
SCSS	miz/themes/mizoon/components/button/_index.scss
HTML Example	miz/themes/mizoon/components/button/index.html
JavaScript	miz/themes/mizoon/components/button/script.js

SCSS Variables #

            

                
                
SCSS
                
            
            $btn-transition: 0.2s linear;
$btn-outline-transition: 0.2s linear;
$btn-has-icon-and-span: ".gap-1";
$btn-not-has-span: ".p-1";
$btn-custom-classes: ".py-1, .px-2";
$btn-outline-custom-classes: ".border-style-solid, .bw-1, .py-1, .px-2";

$btn: (
    primary: (
        background: "primary",
        color: "on-primary",
        background-hover: "primary-dark",
        color-hover: "on-primary"
    ),
    secondary: (
        background: "secondary",
        color: "on-secondary",
        background-hover: "secondary-dark",
        color-hover: "on-secondary"
    ),
    success: (
        background: "success-regular",
        color: "button-text",
        background-hover: "success-dark",
        color-hover: "button-text"
    ),
    danger: (
        background: "danger-regular",
        color: "button-text",
        background-hover: "danger-dark",
        color-hover: "button-text"
    ),
    warning: (
        background: "warning-regular",
        color: "button-text",
        background-hover: "warning-dark",
        color-hover: "button-text"
    ),
    info: (
        background: "information-regular",
        color: "button-text",
        background-hover: "information-dark",
        color-hover: "button-text"
    ),
    link: (
        background: "transparent",
        color: "information-light",
        background-hover: "transparent",
        color-hover: "information-dark"
    )
);

$btn-outline: (
    primary: (
        border: "primary",
        color: "primary",
        border-hover: "primary",
        color-hover: "on-primary",
        background-hover: "primary"
    ),
    secondary: (
        border: "secondary",
        color: "secondary",
        border-hover: "secondary",
        color-hover: "on-secondary",
        background-hover: "secondary"
    ),
    success: (
        border: "success-regular",
        color: "success-regular",
        border-hover: "success-regular",
        color-hover: "button-text",
        background-hover: "success-regular"
    ),
    danger: (
        border: "danger-regular",
        color: "danger-regular",
        border-hover: "danger-regular",
        color-hover: "button-text",
        background-hover: "danger-regular"
    ),
    warning: (
        border: "warning-regular",
        color: "warning-regular",
        border-hover: "warning-regular",
        color-hover: "button-text",
        background-hover: "warning-regular"
    ),
    info: (
        border: "information-regular",
        color: "information-regular",
        border-hover: "information-regular",
        color-hover: "button-text",
        background-hover: "information-regular"
    ),
    link: (
        border: "transparent",
        color: "information-light",
        border-hover: "transparent",
        color-hover: "information-light",
        background-hover: "transparent"
    )
);
        

JavaScript #

Currently, there is no specific JavaScript functionality for the button component.