IgxBadgeComponent

Badge provides visual notifications used to decorate avatars, menus, etc.

Igx Module: IgxBadgeModule
Igx Theme: igx-badge-theme
Igx Keywords: badge, icon, notification
Igx Group: Data Entry & Display

Remarks

[object Object]

Example

<div class="avatar-badge-container">
 <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
 <igx-badge icon="check" type="success" shape="square"></igx-badge>
</div>

Constructors

new IgxBadgeComponent(): IgxBadgeComponent

Returns IgxBadgeComponent

Properties

cssClass

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

cssClass: string = 'igx-badge'

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:140

Example

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

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

dot

Sets/gets whether the badge is displayed as a dot. When true, the badge will be rendered as a minimal 8px indicator without any content. Default value is false.

dot: boolean = false

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:201

Example

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

icon

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

icon: string

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:106

Remarks

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>

iconSet

The name of the icon set. Used in case the icon is from a different icon set.

iconSet: string

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:112

id

Sets/gets the id of the badge.

id: string

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:62

Remarks

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

Example

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

label

Sets/gets the aria-label attribute value.

label: string = 'badge'

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:174

Example

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

badge.label = 'badge';

outlined

Sets/gets whether the badge is outlined. Default value is false.

outlined: boolean = false

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:187

Example

<igx-badge outlined></igx-badge>

role

Sets/gets the role attribute value.

role: string = 'status'

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:126

Example

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

badge.role = 'status';

shape

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

shape: "rounded" | "square" = 'rounded'

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:152

Example

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

type

Sets/gets the type of the badge.

type: string = IgxBadgeType.PRIMARY

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:77

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>

value

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

value: string | number = ''

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:91

Remarks

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

Example

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

Accessors

errorClass

get errorClass(): boolean

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:236

Returns boolean

infoClass

get infoClass(): boolean

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:221

Returns boolean

successClass

get successClass(): boolean

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:226

Returns boolean

warningClass

get warningClass(): boolean

Defined in projects/igniteui-angular/badge/src/badge/badge.component.ts:231

Returns boolean