Button (React)
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
- Component class
Button- Stylus mixin for styles generating
provideButtonYDF_Component- Pre-made themes
Button.Themes.regular- Regular (Default)
- Pre-made geometric variations
Button.GeometricVariations.regular- Regular (Default)
Button.GeometricVariations.small- Small
Button.GeometricVariations.linkLike- Link Like
- Geometric modifiers
Button.GeometricModifiers.pillShape- Maximal Roundings of the Corners
Button.GeometricModifiers.squareShape- Square Shape
Button.GeometricModifiers.squareShapeUnlessOverflowed- Square Shape Unless Overflowed
Button.GeometricModifiers.singleLine- Always Single Line with Text Truncating on Overflow
Button.GeometricModifiers.noLeftBorderAndRoundings- No Left Border and Roundings
Button.GeometricModifiers.noRightBorderAndRoundings- No Right Border and Roundings
Button.GeometricModifiers.noTopBorderAndRoundings- No Top Border and Roundings
Button.GeometricModifiers.noBottomBorderAndRoundings- No Bottom Border and Roundings
Button.GeometricModifiers.noRoundings- No Roundings
Button.GeometricModifiers.horizontallyShrinkable- Horizontally Shrinkable
- Pre-made decorative variations
Button.DecorativeVariations.regular- Regular (Default)
Button.DecorativeVariations.accented- Accessed
Button.DecorativeVariations.danger- Danger Action
Button.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
- Available