Sets/gets the the css class to use on the badge.

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.cssClass = 'my-badge-class';

Sets/gets an icon for the badge from the material icons set.

Remarks

Has priority over the value property. If neither a value nor an icon is set the content of the badge will be empty. Providing an invalid value won't display anything.

Example

<igx-badge icon="check"></igx-badge>

Sets/gets the id of the badge.

Remarks

If not set, the id will have value "igx-badge-0".

Example

<igx-badge id="igx-badge-2"></igx-badge>

Sets/gets the aria-label attribute value.

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.label = 'badge';

Sets/gets the role attribute value.

Example

@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;

badge.role = 'status';

Sets a square shape to the badge, if shape is set to square. By default the shape of the badge is rounded.

Example

<igx-badge shape="square"></igx-badge>

Sets/gets the type of the badge.

Remarks

Allowed values are primary, info, success, warning, error. Providing an invalid value won't display a badge.

Example

<igx-badge type="success"></igx-badge>

Sets/gets the value to be displayed inside the badge.

Remarks

If an icon property is already set the icon will be displayed. If neither a value nor an icon is set the content of the badge will be empty.

Example

<igx-badge value="11"></igx-badge>