Last updated
Was this helpful?
Last updated
Was this helpful?
This guide will show how to use badges in your applications. See how easy it is to drag and drop badges onto your forms and connect them to your business logic. Badges can be modified, styled and even changed at runtime.
To see a live sample of the component you can go .
The badge component can be used to easily highlight new or unread items in labels or buttons.
Label example:
Button example:
Like all components, baqdges can be styled using themes and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the styleClass property.
Like most components, Badges have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a badge is the onAction event, which is triggered when the component is clicked or the user hits the Enter key while the badge has focus.
Badges, like many components, can be modified at runtime through code. Below are a few examples of controlling a Badge from code.
You can easily change the enabled state of a Badge at runtime.
You can easily change the visible state of a Badge at runtime.
Like most components, a Badge has API methods which can be called from code. Below is an example of common API calls.
You can easily add a style class to a badge using the addStyleClass method.
The following articles are recommended for additional reading:
In the , drag the Badge component from the Pallet onto the form.
If the component does not appear in the pallet, it means you do not have the Bootstrap Extra Components package installed. Click "Get more components" at the top of the pallet to open the and install it.
Badges, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the badge in the to see a list of properties in the . Below are some common properties and how to set them at design-time.
See the reference docs for for a complete list of its .
The text displayed on the label or button can be modified by setting its property. Most often, this will just be plain text, such as "Messages" or "Inbox". In this case, just enter the value into the editor or directly on the component by double-clicking it. For more options open the .
The badge text shown on the label or button can be modified by setting its property. Usually this will be dynamic, otherwise just enter the value into the editor. For more options open the .
Remember that text can also be dynamic, data- or localized. For more options, you can open edit the text property in the .
Many times, a badge will be decorated with an image or font icon. To add an image to your badge, edit the property and choose the image style class of the font icon you wish to use. For example, enter a value of fa-regular fa-envelope to get a nice "Messages" icon.
For more information, please see the section of the guide on .
For example, styleClass="font-weight-bold h3 border-class"
To Handle the event, double-click the value for the onAction property in the . You will see the . You'll have the option select an existing Method or create a new Method. The method will be called when the badge's onAction event is fired and the object will be passed to it.
See the for comprehensive list of
See the for a complete list of programmable and methods.
Anywhere you show text, it can be translated and localized to the users language. For more information, read our guide on
Guide for using badges in your applications
