Button

The button has the reputation of the primitive GUI component from which the learning of UI/UX frameworks usually beings. However in spite of unremarkable appearance of rectangle with label, this component is very deceptive with its apparent simplicity.

The appearance of button could have 3 HTML elements: button, input and a, herewith, each one have own features. However, only button and a could have the child content, but only button　and　input could have disabled attribute.

What about the styles? Well, the changing of border color or background color is very simple, but as the requirements gets closer to the today market's leve, the quantity of variables in equation increases sharply. Firs, being the control element, the button has the plenty of states such as hover, focus, active, disabled. All of these states must be visually distinguishable, herewith for each theme if any (it even does not  matter the theme in YDF understanding or no). Some of these states are mutually exclusive, some of these states could occur simultaneously thus the styles must be applied in certain order avoiding the conflicts.

And, what it the label does not fit in the button? What if required to add the SVG icon to button? All icons hase different sizes, and internal indents in SVG canvas is also different! The method of color changing in icon depends on it SVG code, while icon must change its color depends on specific states of button! What is the button must have the square shape when it have only icon without label? (Although we are basically not recommend the icons without labels because their meaning could be not understood by the users with poor experience, the attempts to assure the customers avoid the using of icon-only button is not always successful). As far as respect these "what it"s, the output CSS-code becomes more complicated and large in volume.

From our side, we made all possible to encapsulate this complexity to clear API. Nevertheless, creating the valid HTML with respecting of accessibility and, if required, the SEO, it is required to understand which HTML code will be generated.

• Synopsis
• Usage
  • Markup
    • Including to Project
    • Pug Mixin Button--YDF
      • Minimal Example
      • Overflow Control
      • SVG Icons
        • Custom Icons
  • Logic

Synopsis

Pug mixin

Button--YDF

Live template of Pug mixin (IntelliJ IDEA IDEs family official plugin)

btn-ydf

Stylus mixin for styles generating

provideButtonYDF_Component

Pre-made themes

Button__YDF.Themes.regular

Regular (Default)

Pre-made geometric variations

Button__YDF.GeometricVariations.regular

Regular (Default)

Button__YDF.GeometricVariations.small

Small

Button__YDF.GeometricVariations.linkLike

Link Like

Geometric modifiers

Button__YDF.GeometricModifiers.pillShape

Maximal Roundings of the Corners

Button__YDF.GeometricModifiers.squareShape

Square Shape

Button__YDF.GeometricModifiers.squareShapeUnlessOverflowed

Square Shape Unless Overflowed

Button__YDF.GeometricModifiers.singleLine

Always Single Line with Text Truncating on Overflow

Button__YDF.GeometricModifiers.noLeftBorderAndRoundings

No Left Border and Roundings

Button__YDF.GeometricModifiers.noRightBorderAndRoundings

No Right Border and Roundings

Button__YDF.GeometricModifiers.noTopBorderAndRoundings

No Top Border and Roundings

Button__YDF.GeometricModifiers.noBottomBorderAndRoundings

No Bottom Border and Roundings

Button__YDF.GeometricModifiers.noRoundings

No Roundings

Button__YDF.GeometricModifiers.horizontallyShrinkable

Horizontally Shrinkable

Pre-made decorative variations

Button__YDF.DecorativeVariations.regular

Regular (Default)

Button__YDF.DecorativeVariations.accented

Accessed

Button__YDF.DecorativeVariations.danger

Danger Action

Button__YDF.DecorativeVariations.linkLike

Link Like

Decorative Modifiers

Button__YDF.DecorativeModifiers.bordersDisguising

No Borders Effect without Changing of Dimensions

Button__YDF.DecorativeModifiers.noBackground

No Background

Button__YDF.DecorativeModifiers.noBackgroundInDefaultState

No Background in Default State

Loading placeholder

Button--YDF__LoadingPlaceholder

Usage

Markup

Including to Project

The markup of this GUI Component is been provided by the Pug mixin with name Button--YDF. The including method is standard, by other words, the including of the Pug file Components.pug to your Pug file, herewith it is also required to include preliminary the Functionality.pug file (the last one already included to pages templates so if it include them one more time, the error will occur).

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug