Sets/gets the the css class to use on the badge.
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.cssClass = 'my-badge-class';
Sets/gets an icon for the badge from the material icons set.
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.
<igx-badge icon="check"></igx-badge>
Sets/gets the id
of the badge.
If not set, the id
will have value "igx-badge-0"
.
<igx-badge id="igx-badge-2"></igx-badge>
Sets/gets the aria-label attribute value.
@ViewChild("MyBadge", { read: IgxBadgeComponent })
public badge: IgxBadgeComponent;
badge.label = 'badge';
Sets/gets the role attribute value.
@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.
<igx-badge shape="square"></igx-badge>
Sets/gets the type of the badge.
Allowed values are primary
, info
, success
, warning
, error
.
Providing an invalid value won't display a badge.
<igx-badge type="success"></igx-badge>
Sets/gets the value to be displayed inside the badge.
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.
<igx-badge value="11"></igx-badge>
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