Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class 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

The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. They are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

Example

<igx-avatar>
  <igx-badge icon="check" type="success"></igx-badge>
</igx-avatar>

Hierarchy

Hierarchy

  • IgxBadgeComponent

Constructors

Properties

Accessors

Constructors

constructor

Properties

cssClass

cssClass: string = 'igx-badge'

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

Example

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

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

icon

icon: string

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>

id

id: string = ...

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>

label

label: string = 'badge'

Sets/gets the aria-label attribute value.

Example

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

badge.label = 'badge';

role

role: string = 'status'

Sets/gets the role attribute value.

Example

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

badge.role = 'status';

shape

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

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>

type

type: string = IgxBadgeType.PRIMARY

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>

value

value: string | number = ''

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>

Accessors

errorClass

infoClass

successClass

warningClass