Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxBadgeComponent

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

IgxBadgeModule

igx-badge-theme

badge, icon, notification

Data Entry & Display

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.

<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

Properties

Accessors

Constructors

Properties

cssClass: string = 'igx-badge'

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

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

badge.cssClass = 'my-badge-class';
dot: boolean = false

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.

<igx-badge dot type="success"></igx-badge>
icon: string

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

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>
iconSet: string

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

id: string = ...

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

Sets/gets the aria-label attribute value.

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

badge.label = 'badge';
outlined: boolean = false

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

<igx-badge outlined></igx-badge>
role: string = 'status'

Sets/gets the role attribute value.

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

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

<igx-badge shape="square"></igx-badge>
type: string = IgxBadgeType.PRIMARY

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

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

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

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

Accessors