Badge
Description:
Badge
Badges are generally used for emphasizing a numerical characteristic of an object, e.g., the number of unread items in a folder.
Allowed Parent Components:
Button
Card Body
Card Header
Card Table Column
Col
Allowed Child Components:
Popover
Pulse
Trigger Before Render
Trigger On Click
Properties
➤ Text
A more readable name for the badge. It doesn't have to be unique, and can include spaces and special characters.
Allowed Values: An expression which should return string after evaluation
➤ Border Color
Select a color or enter the custom class to set the color in all sides of the badge border.
Allowed Values: Select a color or enter the custom class to set the color in all sides of the badge border.
➤ Badge Color
Select a color or enter the custom class to set the background color of the badge.
Allowed Values: Select a color or enter the custom class to set the background color of the badge.
➤ Rounded
Select this checkbox for circular border.
Allowed Values: Yes/No
➤ View Attribute
Allowed Values: Attribute
➤ Class Name Expression
Allowed Values: An expression which should return string after evaluation
➤ Tool Tip
A message which appears when a cursor is positioned over.
Allowed Values: An expression which should return string after evaluation
➤ Tool Tip Position
Select an option to change the placement of the tooltip when appears.
Allowed Values:
left
right
top
bottom
➤ All Caps
Select this property for capitalizing the text.
Allowed Values: Yes/No
➤ Text Color
Select a color or enter the custom class to change the color of the text.
Allowed Values: Select a color or enter the custom class to change the color of the text.
➤ Font Weight
This property sets how thick or thin characters in text should be displayed.
Allowed Values:
Light
Normal
Semi Bold
Bold
Default
➤ Hint Text
Check this property to fade the font color of the text.
Allowed Values: Yes/No
➤ Italic
Check this property to change the font style of the text to italic.
Allowed Values: Yes/No
➤ Muted
Check this property to change the color of the font to light grey.
Allowed Values: Yes/No
➤ No Decoration
Check this property to remove decoration of the text
Allowed Values: Yes/No
➤ Overflow Ellipsis
Check this property to show hidden overflow content as an ellipsis ('…').
Allowed Values: Yes/No
➤ Text Size
Select an option to change the size of the text.
Allowed Values:
Small
Normal
Large
Default
➤ On Click
Allowed Values: Controller Function
➤ Margin
Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
Allowed Values: Any number value
➤ Margin Bottom
Select a value to add margin on the bottom of the component.
Allowed Values: Any number value
➤ Margin Left
Select a value to add margin on the left of the component.
Allowed Values: Any number value
➤ Margin Right
Select a value to add margin on the right of the component.
Allowed Values: Any number value
➤ Margin Top
Select a value to add margin on the top of the component.
Allowed Values: Any number value
➤ Padding
Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.
Allowed Values: Any number value
➤ Padding Bottom
Select a value to add padding in the bottom of the component.
Allowed Values: Any number value
➤ Padding Left
Select a value to add padding in the left of the component.
Allowed Values: Any number value
➤ Padding Right
Select a value to add padding in right of the component.
Allowed Values: Any number value
➤ Padding Top
Select a value to add padding in top of the component.
Allowed Values: Any number value
➤ Position Absolute
Enable this apply absolute position style. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block.
Allowed Values: Yes/No
➤ Absolute Top
Enter a numeric value to set offset from top.
Allowed Values: Any number value
➤ Absolute Right
Enter a numeric value to set offset from right.
Allowed Values: Any number value
➤ Absolute Bottom
Enter a numeric value to set offset from bottom.
Allowed Values: Any number value
➤ Absolute Left
Enter a numeric value to set offset from left.
Allowed Values: Any number value
Last updated