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:

1. Button

2. Card Body

3. Card Header

4. Card Table Column

5. Col

Allowed Child Components:

1. Popover

2. Pulse

3. Trigger Before Render

4. 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:

1. left

2. right

3. top

4. 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:

1. Light

2. Normal

3. Semi Bold

4. Bold

5. 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:

1. Small

2. Normal

3. Large

4. 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