# Char Circle

![Char Circle](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2Fsync%2F7b4fc867bc381acc64e4e0cdc563a513546434be.png?generation=1600778693270870\&alt=media)

## Description:

Char Circle

Char Circle component is used to display the first character of the text inside a colored circle. This component can be used in lists to differentiate records.

### Allowed Parent Components:

1. Card Table Column
2. Col

### Allowed Child Components:

1. Popover
2. Pulse
3. Trigger Before Render
4. Trigger On Click

### Properties

### ➤ Text

Provide a text or an expression e.g. #{session.userName}, Circle

Allowed Values: An expression which should return string after evaluation

### ➤ Icon

Use the icons to display images to represent the component

Allowed Values: Icon List

### ➤ Rotate

This property used for icon rotation in degrees. select numerical values e.g. 30, 215, 360.

Allowed Values: Any number value

### ➤ View Attribute

Allowed Values: Attribute

### ➤ Class Name Expression

Allowed Values: An expression which should return string after evaluation

### ➤ Size

Provide numerical values for size. Default size set to 32

Allowed Values: Any number value

### ➤ Rounded

Select this checkbox for getting circular border

Allowed Values: Yes/No

### ➤ Background Color

Select a color or enter the custom class to set the background color of the circle

Allowed Values: Select a color or enter the custom class to set the background color of the circle

### ➤ 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

### ➤ On Click

Allowed Values: Controller Function