# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloudio.io/ui-components/widgets/badge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.