Skip to content

fix(button-group): update styling content #1301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hristo313 wants to merge 3 commits into
base: vnext
Choose a base branch
from
Open

fix(button-group): update styling content #1301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b24395
fix(button-group): update styling content
Hristo313 Aug 27, 2026
1c34012
Merge branch 'vnext' into hhristov/update-button-group-styling
Hristo313 Aug 29, 2026
5e963e4
fix(samples): update styling
Hristo313 Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions samples/inputs/badge/dot/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-dot">
<div class="dot-example icon-example">
<div class="icon-circle">
Expand Down
20 changes: 5 additions & 15 deletions samples/inputs/badge/dot/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,16 +89,6 @@ igc-avatar {
width: 12px;
}

.row-indicator igc-badge,
.nav-icon igc-badge {
--ig-badge-background-color: #0057A9;
}

.row-indicator igc-badge::part(base),
.nav-icon igc-badge::part(base) {
background-color: #0057A9;
}

.row-title {
flex: 1;
}
Expand All @@ -109,7 +99,7 @@ igc-avatar {
}

.row-time.unread {
color: #0057A9;
color: var(--ig-gray-900);
font-weight: 600;
}

Expand All @@ -133,7 +123,7 @@ igc-avatar {
align-items: center;
gap: 4px;
min-width: 56px;
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand All @@ -143,12 +133,12 @@ igc-avatar {
}

.nav-item.active {
color: #0057A9;
color: var(--ig-primary-800);
}

.nav-item.active igc-icon {
color: #0057A9;
fill: #0057A9;
color: var(--ig-primary-800);;
fill: var(--ig-primary-800);
}

.nav-icon {
Expand Down
2 changes: 2 additions & 0 deletions samples/inputs/badge/icon/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-icon">
@foreach (var item in Badges)
{
Expand Down
22 changes: 3 additions & 19 deletions samples/inputs/badge/icon/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,14 @@ https://dl.infragistics.com/x/css//samples/

igc-avatar {
--size: 40px;
--ig-avatar-background: var(--ig-gray-700);
--ig-avatar-color: var(--ig-gray-50);
}

igc-badge[variant="info"] {
--ig-badge-background-color: #0057A9;
}

igc-badge[variant="info"]::part(base) {
background-color: #0057A9;
--ig-avatar-background: var(--ig-gray-400);
--ig-avatar-color: var(--ig-gray-800);
}

igc-badge igc-icon {
color: var(--ig-gray-50);
}

igc-badge.badge-settings[variant="info"] {
--ig-badge-background-color: #0070BA;
}

igc-badge.badge-settings[variant="info"]::part(base) {
background-color: #0070BA;
}

.badge-star igc-icon {
color: var(--ig-gray-900);
}
Expand Down Expand Up @@ -73,7 +57,7 @@ igc-badge.badge-settings[variant="info"]::part(base) {
}

.badge-icon-item span {
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand Down
6 changes: 4 additions & 2 deletions samples/inputs/badge/outlined/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-outlined">
<div class="outlined-example">
<div class="icon-circle">
<IgbIcon @ref="iconRef" IconName="favorite_border" Collection="material" />
</div>
<IgbBadge Variant="@StyleVariant.Info" Outlined="true" class="badge-info-blue">23</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info" Outlined="true">23</IgbBadge>
</div>
<div class="outlined-example">
<IgbAvatar Initials="AZ" Shape="AvatarShape.Rounded" />
Expand All @@ -24,7 +26,7 @@
<div class="step">
<div class="step-marker">
<span class="step-circle">2</span>
<IgbBadge Dot="true" Variant="@StyleVariant.Info" Outlined="true" class="payment-dot-blue" />
<IgbBadge Dot="true" Variant="@StyleVariant.Info" Outlined="true" />
</div>
<span class="step-label">Payment</span>
</div>
Expand Down
32 changes: 3 additions & 29 deletions samples/inputs/badge/outlined/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ igc-badge {

igc-avatar {
--size: 40px;
--ig-avatar-background: var(--ig-gray-700);
--ig-avatar-color: var(--ig-gray-50);
--ig-avatar-background: var(--ig-gray-400);
--ig-avatar-color: var(--ig-gray-800);
}

.outlined-example igc-avatar igc-icon {
Expand Down Expand Up @@ -68,32 +68,6 @@ igc-avatar {
color: var(--ig-gray-800);
}

.badge-info-blue {
--ig-badge-background-color: #0057A9;
}

.badge-info-blue::part(base) {
background-color: #0057A9;
}

.payment-dot-blue {
--ig-badge-background-color: #0057A9;
--ig-badge-dot-size: 0.5rem;
}

.payment-dot-blue::part(base) {
background-color: #0057A9;
}

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
}

.steps {
display: flex;
align-items: flex-start;
Expand Down Expand Up @@ -137,7 +111,7 @@ igc-badge igc-icon {
}

.step-label {
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand Down
2 changes: 2 additions & 0 deletions samples/inputs/badge/overview/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-overview">
<div class="badge-example avatar-example">
<IgbAvatar Src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
Expand Down
6 changes: 0 additions & 6 deletions samples/inputs/badge/overview/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ igc-badge {
}

.event-example igc-chip::part(base) {
background-color: #E0E0E0;
border-radius: 999px;
}

Expand All @@ -45,11 +44,6 @@ igc-badge {
inset-inline-end: -0.8rem;
}

.event-example igc-badge::part(base) {
background-color: #0057A9;
color: var(--ig-gray-50);
}

.icon-example igc-badge {
inset-block-start: 0;
inset-inline-end: 0;
Expand Down
8 changes: 5 additions & 3 deletions samples/inputs/badge/shape/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-shape">
<div class="badge-shape-row">
<span class="row-label">Rounded</span>
Expand All @@ -13,11 +15,11 @@
</div>
<div class="badge-shape-row">
<span class="row-label">Square</span>
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square" class="badge-info-blue">
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square">
<IgbIcon IconName="check" Collection="material" />
</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square" class="badge-info-blue">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square" class="badge-small badge-info-blue">
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info" Shape="@BadgeShape.Square" class="badge-small">
<IgbIcon IconName="check" Collection="material" />
</IgbBadge>
</div>
Expand Down
19 changes: 1 addition & 18 deletions samples/inputs/badge/shape/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ https://dl.infragistics.com/x/css//samples/

.row-label {
justify-self: end;
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand All @@ -34,20 +34,3 @@ https://dl.infragistics.com/x/css//samples/
.badge-small {
--ig-size: var(--ig-size-small);
}

.badge-info-blue {
--ig-badge-background-color: #0057A9;
}

.badge-info-blue::part(base) {
background-color: #0057A9;
}

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
}
8 changes: 5 additions & 3 deletions samples/inputs/badge/size/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-size">
<div class="badge-size-row badge-small">
<span class="row-label">Small</span>
<IgbBadge Dot="true" Variant="@StyleVariant.Danger" />
<IgbBadge Variant="@StyleVariant.Info" class="badge-info-blue">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Success">
<IgbIcon @ref="checkIconRef" IconName="check" Collection="material" />
</IgbBadge>
</div>
<div class="badge-size-row badge-medium">
<span class="row-label">Medium</span>
<IgbBadge Dot="true" Variant="@StyleVariant.Danger" />
<IgbBadge Variant="@StyleVariant.Info" class="badge-info-blue">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Success">
<IgbIcon IconName="check" Collection="material" />
</IgbBadge>
</div>
<div class="badge-size-row badge-large">
<span class="row-label">Large</span>
<IgbBadge Dot="true" Variant="@StyleVariant.Danger" />
<IgbBadge Variant="@StyleVariant.Info" class="badge-info-blue">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Info">2</IgbBadge>
<IgbBadge Variant="@StyleVariant.Success">
<IgbIcon IconName="check" Collection="material" />
</IgbBadge>
Expand Down
19 changes: 1 addition & 18 deletions samples/inputs/badge/size/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ https://dl.infragistics.com/x/css//samples/

.row-label {
justify-self: end;
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand All @@ -32,23 +32,6 @@ https://dl.infragistics.com/x/css//samples/
letter-spacing: 0.3px;
}

.badge-info-blue {
--ig-badge-background-color: #0057A9;
}

.badge-info-blue::part(base) {
background-color: #0057A9;
}

igc-badge::part(base),
igc-badge igc-icon {
color: var(--ig-gray-50);
}

igc-badge igc-icon {
fill: var(--ig-gray-50);
}

.badge-large { --ig-size: var(--ig-size-large); }
.badge-medium { --ig-size: var(--ig-size-medium); }
.badge-small { --ig-size: var(--ig-size-small); }
2 changes: 2 additions & 0 deletions samples/inputs/badge/styling/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-styling">
<div class="styling-item green">
<IgbAvatar Shape="AvatarShape.Circle">
Expand Down
6 changes: 3 additions & 3 deletions samples/inputs/badge/styling/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@ igc-badge {
}

.styling-item.green igc-avatar {
--icon-color: #248436;
--ig-avatar-background: #A9CEB0;
--ig-avatar-color: #248436;
--icon-color: var(--ig-success-900);
--ig-avatar-background: var(--ig-success-200);
--ig-avatar-color: var(--ig-success-900);
}

.styling-item.pink igc-avatar {
Expand Down
2 changes: 2 additions & 0 deletions samples/inputs/badge/tailwind-styling/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-parent">
<div class="badge-item">
<IgbAvatar Initials="AZ" Shape="AvatarShape.Rounded" Size="AvatarSize.Small" />
Expand Down
4 changes: 2 additions & 2 deletions samples/inputs/badge/tailwind-styling/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@layer theme, base, components, utilities;

igc-badge { --ig-size: var(--ig-size-small); }
igc-avatar { --size: 40px; --ig-avatar-background: var(--ig-gray-700); --ig-avatar-color: var(--ig-gray-50); }
igc-avatar igc-icon { color: var(--ig-gray-50); }
igc-avatar { --size: 40px; --ig-avatar-background: var(--ig-gray-400); --ig-avatar-color: var(--ig-gray-800); }
igc-avatar igc-icon { color: var(--ig-gray-800); }
.badge-close { --ig-badge-background-color: var(--ig-error-500); }
.badge-volume { --ig-badge-background-color: #8B5BB1; }
.badge-remove { --ig-badge-background-color: var(--ig-gray-900); }
Expand Down
2 changes: 2 additions & 0 deletions samples/inputs/badge/type/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls

<link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />

<div class="badge-type">
<div class="badge-type-item">
<div class="avatar-wrapper">
Expand Down
2 changes: 1 addition & 1 deletion samples/inputs/badge/type/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ igc-badge {
}

.badge-type-item span {
color: #556c86;
color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
Expand Down
Loading