Yamato DaiwaFrontend (2.0.0-beta.4)

Badge (Vue)

In YDF, the badge in the informational non-interactive component displaying inside the rectangle with rounded corners or wihtout them the word or other characters sequence like date and/or time. It is possible to add the icon but note that it is the supplement for the label,  not the substitution for the label.

In UI/UX frameworks the similar component could have another names such as Chip, Pill or Tag. There is no the official definitions for the components, moreover some frameworks defines them by own, and YDF which is not intended to be considered as framework reserves the right to do so.

In YDF, the badge designed as exactly how non-interactive component which just displaying the information. It should be distinguished from visually similar interactive components such the ones could be used as button, or could be deleted by click the dedicated internal button, etc. Also, the YDF badge supports the two labels: key and value that is important when, for example, it is unobvious by the calendar the date of which event exactly is displaying.

Synopsis

Component class
Badge
Stylus mixin for styles generating
provideBadgeYDF_Component
Pre-made themes
Badge.Themes.regular
Regular (Default)
Pre-made geometric variations
Badge.GeometricVariations.regular
Regular (Default)
Badge.GeometricVariations.small
Small
Geometric modifiers
Badge.GeometricModifiers.pillShape
Maximal Roundings of the Corners
Badge.GeometricModifiers.singleLine
Always Single Line with Text Truncating on Overflow
Pre-made decorative variations
Badge.DecorativeVariations.veryCatchyBright
Very Catchy Bright (red as default)
Badge.DecorativeVariations.catchyBright
Catchy Bright (orange as default)
Badge.DecorativeVariations.modestlyCatchyBright
Modestly Catchy Bright (yellow as default)
Badge.DecorativeVariations.neutralBright
Neutral Bright (light blue as default)
Badge.DecorativeVariations.modestlyCalmingBright
Modestly Calming Bright (blue as default)
Badge.DecorativeVariations.calmingBright
Calming Bright (green as default)
Badge.DecorativeVariations.achromaticBright
Achromatic Bright (dark gray as default)
Badge.DecorativeVariations.veryCatchyPastel
Very Catchy Pastel (red as default)
Badge.DecorativeVariations.catchyPastel
Catchy Pastel (orange as default
Badge.DecorativeVariations.modestlyCatchyPastel
Modestly catchy pastel (yellow as default)
Badge.DecorativeVariations.neutralPastel
Neutral Pastel (light blue as default)
Badge.DecorativeVariations.modestlyCalmingPastel
Modestly Calming Pastel (blue as default)
Badge.DecorativeVariations.calmingPastel
Calming Pastel (green as default)
Badge.DecorativeVariations.achromaticPastel
Achromatic Pastel (light gray as default)
Decorative Modifiers
Badge__YDF.DecorativeModifiers.bordersDisguising
No Borders Effect without Changing of Dimensions
Badge__YDF.DecorativeModifiers.noBackground
No Fill
Loading placeholder
Available