fix(badge): clarifying the usage of badge value and icon#6453
fix(badge): clarifying the usage of badge value and icon#6453
Conversation
kdinev
requested review from
Copilot and
didimmova
and removed request for
Copilot
| <igx-badge>{{ model.value }}</igx-badge> | ||
| ``` | ||
|
|
||
| The `[icon]` input takes precedence over `[value]`. When both inputs are set, the icon is displayed and the value is ignored: |
There was a problem hiding this comment.
that's not right, they're both displayed
<igx-badge [type]="statusType(cell.value)" [icon]="'check'" [value]="5"></igx-badge>
There was a problem hiding this comment.
@didimmova https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/badge/src/badge/badge.component.ts#L80
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/badge/src/badge/badge.component.ts#L95
I took this directly from the badge component API docs. The component doc needs to be fixed then.
There was a problem hiding this comment.
Fixed in b473bde — the section now correctly states that both icon and value are displayed simultaneously when both are set, removing the incorrect precedence claim.
There was a problem hiding this comment.
Pull request overview
Updates the Badge component documentation to clarify when to use the badge value vs icon inputs and how they interact.
Changes:
- Adds a new “Badge Value and Icon” section explaining recommended usage of the
valueinput vs content projection. - Documents precedence behavior when both
iconandvalueare set, with examples.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| Use the `[value]` input to display text or a numeric count inside the badge. This is the recommended approach instead of projecting content directly: | ||
|
|
||
| ```html | ||
| <!-- Recommended --> | ||
| <igx-badge [value]="model.value"></igx-badge> | ||
|
|
||
| <!-- Avoid --> | ||
| <igx-badge>{{ model.value }}</igx-badge> | ||
| ``` | ||
|
|
||
| The `[icon]` input takes precedence over `[value]`. When both inputs are set, the icon is displayed and the value is ignored: | ||
|
|
There was a problem hiding this comment.
This section introduces the value input, but later in the same document the “Badge in List” NOTE states that igx-badge has only icon and type inputs. Please update that NOTE (or rephrase it to avoid implying exclusivity) so the page stays internally consistent and doesn’t mislead readers about available inputs.
There was a problem hiding this comment.
@copilot apply changes based on this feedback
There was a problem hiding this comment.
Updated in b473bde — the NOTE in "Badge in List" now includes the value input alongside icon and type so it's internally consistent with the rest of the page.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…lue input Agent-Logs-Url: https://github.com/IgniteUI/igniteui-docfx/sessions/c15a6d41-5bea-48e0-b07b-7c44a9963c73 Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com>
Closes #
Checklist:
preview\beta../relative/path.mdIgxSelectComponent,<igx-combo>code blocksfor the names of classes / tags / propertiescode blockspending-localizationlabel when the review of the PR is done