Badge (Blazor)

The framed text was used long before computerization, in the books and other printed products. Although mainly the important text being framed, sometimes the notices and other secondary information also being.

In the development of web sites and web applications, the text framing has become more advanced and frequent.

• As in printed products, the frame is being used on the web sites with large amount of text for the accenting of specific fragments. To allow the visitor instantly estimate the level of importance of accented text, the color coding is being used. For the important block, the warm colors is being selected (red, orange, yellow), and for the secondary information the cold colors (blue, green) or achromatic (black or gray frame with white or light gray background). Additionally, the icons are frequently been used.
• In the GUI, the framed text has acquired the additional role by becoming to the tool for notifications of users. Unlike popup messages which are displaying for the short period of time, the framed text usually displaying constantly or until user will dismiss it by dedicated button (if it is). It also recommended to suggest the used to react to the message by adding of one or more buttons inside.

The framed text is being recommended for using in the following cases:

The displaying of retrieving of data from the server error

In this case it will be great to add the button for the initiating of new data retrieving attempt.

The displaying of message about absence of the data which could be shown

It is better to prepare the separate messages for case when there is no data satisfying to filtering and there is no data at whole. The suggested reaction will different too: in first case it will be the button for the resetting of the searching conditions, and in the second case it will be suggested to add some data (if it is allowed for current authenticated used).

The displaying of short guidances about usage of the website or web application

It is very important not only for new users of your product but only for the user with low lever of computer literacy computer literacy there are still a many of them.

The prompting of the user for the specific action

For example if in your website or application the authentication is optional, it is possible to suggest the sign up and explain which benefits the authorized uses have. Of course, in this case there are must be the links to the signing up page and, for the registered uses, to singing in page.

Contrariwise, for the following cases the framed text is not  the best choice.

• The displaying of the submitting data errors
• The displaying of the messages about successful submitting of the data
• The displaying of the messages about successful signing in or signing out

The floating messages (in YDF it is the Snackbar component) are better suited with such cases).

• Synopsis

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