Button Component

A button is a component that the user can click to trigger an action. use mgnl-button--md always for buttons and if possible always use the button tag.

Verified

Dependencies: typography

                    
import "@solutas/mgnl-elements-css/build/components/button/button.css"

Disabled Buttton

A disabled button can be either disabled on button tag or is-disabled class

                    
<button tabindex="0" class="mgnl-button mgnl-button--primary 
        mgnl-button--md
        " disabled>
    <div class="mgnl-button__label">Label</div>
</button>

Variations

primary

    
<button role="button" tabindex="0" class="mgnl-button mgnl-button--primary 
        mgnl-button--md
        ">
        <div class="mgnl-button__label">label</div>
</button>

secondary

    
<button role="button" tabindex="0" class="mgnl-button mgnl-button--secondary 
        mgnl-button--md
        ">
        <div class="mgnl-button__label">label</div>
</button>

danger

    
<button role="button" tabindex="0" class="mgnl-button mgnl-button--danger 
        mgnl-button--md
        ">
        <div class="mgnl-button__label">label</div>
</button>

Use CSS Var

--mgnl-animation-duration-50

--mgnl-animation-timing-50

--mgnl-button-primary-color-background-default

--mgnl-button-primary-color-label-default

--mgnl-button-primary-border-default

--mgnl-button-primary-focus-outline-default

--mgnl-button-primary-color-background-hover

--mgnl-button-primary-border-hover

--mgnl-button-primary-color-background-disabled

--mgnl-button-primary-border-disabled

--mgnl-button-primary-color-label-disabled

--mgnl-button-primary-border-focus

--mgnl-button-primary-focus-outline-focus

--mgnl-button-secondary-color-background-default

--mgnl-button-secondary-color-label-default

--mgnl-button-secondary-border-default

--mgnl-button-secondary-focus-outline-default

--mgnl-button-secondary-color-background-hover

--mgnl-button-secondary-border-hover

--mgnl-button-secondary-color-background-disabled

--mgnl-button-secondary-border-disabled

--mgnl-button-secondary-color-label-disabled

--mgnl-button-secondary-border-focus

--mgnl-button-secondary-focus-outline-focus

--mgnl-button-danger-color-background-default

--mgnl-button-danger-color-label-default

--mgnl-button-danger-border-default

--mgnl-button-danger-focus-outline-default

--mgnl-button-danger-color-background-hover

--mgnl-button-danger-border-hover

--mgnl-button-danger-color-background-disabled

--mgnl-button-danger-border-disabled

--mgnl-button-danger-color-label-disabled

--mgnl-button-danger-border-focus

--mgnl-button-danger-focus-outline-focus

--mgnl-button-xs-transition

--mgnl-button-xs-typography-letter-spacing

--mgnl-button-xs-typography-font-weight

--mgnl-button-xs-typography-line-height

--mgnl-button-xs-typography-font-size

--mgnl-button-xs-typography-font-family

--mgnl-button-xs-gap

--mgnl-button-xs-padding

--mgnl-button-xs-border-radius-default

--mgnl-button-sm-transition

--mgnl-button-sm-typography-letter-spacing

--mgnl-button-sm-typography-font-weight

--mgnl-button-sm-typography-line-height

--mgnl-button-sm-typography-font-size

--mgnl-button-sm-typography-font-family

--mgnl-button-sm-gap

--mgnl-button-sm-padding

--mgnl-button-sm-border-radius-default

--mgnl-button-md-transition

--mgnl-button-md-typography-letter-spacing

--mgnl-button-md-typography-font-weight

--mgnl-button-md-typography-line-height

--mgnl-button-md-typography-font-size

--mgnl-button-md-typography-font-family

--mgnl-button-md-gap

--mgnl-button-md-padding

--mgnl-button-md-border-radius-default