Class IgxBadgeComponent

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

igxmodule

IgxBadgeModule

igxtheme

igx-badge-theme

igxkeywords

badge, icon, notification

igxgroup

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

  • IgxBadgeComponent

Index

Constructors

Properties

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: 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: 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: string = 'badge'

Sets/gets the aria-label attribute value.

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

badge.label = 'badge';
role: string = 'status'

Sets/gets the role attribute value.

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

badge.role = 'status';
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: 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

  • get errorClass(): boolean
  • get infoClass(): boolean
  • get successClass(): boolean
  • get warningClass(): boolean