Badge (React)
Page is not Completed Yet
We are sorry, but this page has not completed yet.
In YDF, the badge in the informational non-interactive component displaying inside the rectangle with rounded corners or without 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.
Overview
- Component class
Badge- Live templates of React Component (IntelliJ IDEA IDEs family official plugin)
- Autocomplete-like
Badge--YDF-React- Abbreviation
bdg-ydf-react- Loading Placeholder
Badge--YDF-LoadingPlaceholder-React
- Stylus mixin for styles generating
generateBadgeYDF_GUI_ComponentStyles- 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
- Unavailable
Badge Class
React Properties
Badge.Properties
{
- keyLabel
- Type
- string
- Is Undefined Forbidden
- No
- Is Null Forbidden
- Yes
- Minimal Characters
- 1
- valueLabel
- Type
- string
- Is Undefined Forbidden
- Yes
- Is Null Forbidden
- Yes
- Minimal Characters
- 1
- theme
- Type
- string
- Undefined Value Substitution
- Badge.Themes.regular
- Is Null Forbidden
- Yes
- Allowed Alternatives
- Badge.Themes.regular
- (Any of ones defined via `Badge.defineThemes(themesNames)`)
- areThemesCSS_ClassesCommon
- Type
- boolean
- Undefined Value Substitution
- Badge.areThemesCSS_ClassesCommon
- Is Null Forbidden
- Yes
- geometricVariation
- Type
- string
- Undefined Value Substitution
- Badge.GeometricVariations.regular
- Is Null Forbidden
- Yes
- Allowed Alternatives
- Badge.GeometricVariations.regular
- Badge.GeometricVariations.small
- (Any of ones defined via `Badge.defineGeometricVariations(geometricVariationsNames)`)
- geometricModifiers
- Type
- Indexed array
- Undefined Value Substitution
- []
- Is Null Forbidden
- Yes
- Are Undefined Elements Forbidden
- Yes
- Are Null Elements Forbidden
- Yes
- Array Elements
- Type
- string
- Allowed Alternatives
- Badge.GeometricModifiers.pillShape
- Badge.GeometricModifiers.singleLine
- decorativeVariation
- Type
- string
- Is Undefined Forbidden
- Yes
- Is Null Forbidden
- Yes
- Allowed Alternatives
- Badge.DecorativeVariations.veryCatchyBright
- Badge.DecorativeVariations.catchyBright
- Badge.DecorativeVariations.modestlyCatchyBright
- Badge.DecorativeVariations.neutralBright
- Badge.DecorativeVariations.modestlyCalmingBright
- Badge.DecorativeVariations.calmingBright
- Badge.DecorativeVariations.achromaticBright
- Badge.DecorativeVariations.veryCatchyPastel
- Badge.DecorativeVariations.catchyPastel
- Badge.DecorativeVariations.modestlyCatchyPastel
- Badge.DecorativeVariations.neutralPastel
- Badge.DecorativeVariations.modestlyCalmingPastel
- Badge.DecorativeVariations.calmingPastel
- Badge.DecorativeVariations.achromaticPastel
- (Any of ones defined via `Badge.defineDecorativeVariations(decorativeVariationsNames)`)
- decorativeModifiers
- Type
- Indexed array
- Undefined Value Substitution
- []
- Is Null Forbidden
- Yes
- Are Undefined Elements Forbidden
- Yes
- Are Null Elements Forbidden
- Yes
- Array Elements
- Type
- string
- Allowed Alternatives
- Badge.DecorativeModifiers.bordersDisguising
- Badge.DecorativeModifiers.noBackground
- rootElementTag
- Type
- string
- Undefined Value Substitution
- "span"
- Is Null Forbidden
- Yes
- Minimal Characters
- 1
- className
- Type
- string
- Is Undefined Forbidden
- No
- Is Null Forbidden
- Yes
- Minimal Characters
- 1
- SVG_Icon
- Type
- React.ElementType<{ className: string; }>
- Is Undefined Forbidden
- No
- Is Null Forbidden
- Yes
- rootElementAttributes
- Type
- Omit<React.HTMLAttributes<HTMLDivElement>, "className">
- Is Undefined Forbidden
- No
- Is Null Forbidden
- Yes