Skip to content

feat(badge): add recipe and tokens #31043

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

Draft
thetaPC wants to merge 5 commits into
base: ionic-modular
Choose a base branch
from
Draft

feat(badge): add recipe and tokens #31043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
396470a
feat(badge): add recipe and tokens
thetaPC Mar 27, 2026
9a2e0d1
feat(badge): more defaults for md
thetaPC Mar 27, 2026
a93bc68
feat(badge): remove crisp
thetaPC Mar 27, 2026
cd2364c
Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework…
thetaPC Mar 30, 2026
9c691b4
feat(avatar, badge, tab-button): a lot of avatar updates
thetaPC Mar 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
20 changes: 10 additions & 10 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,19 +469,19 @@ export namespace Components {
*/
"color"?: Color;
/**
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Only applies to the `ionic` theme.
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset.
*/
"hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
"mode"?: "ios" | "md";
/**
* Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
* Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners. Defaults to `"soft"` if both the shape property and theme config are unset.
*/
"shape"?: 'soft' | 'round | rectangular';
"shape"?: 'crisp' | 'soft' | 'round' | 'rectangular';
/**
* Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon). Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
* Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size. Defaults to `"small"` if both the size property and theme config are unset.
*/
"size"?: 'small' | 'medium' | 'large';
/**
Expand Down Expand Up @@ -898,7 +898,7 @@ export namespace Components {
*/
"shape"?: IonChipShape;
/**
* Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset.
* Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding. Defaults to `"large"` if both the size property and theme config are unset.
*/
"size"?: IonChipSize;
}
Expand Down Expand Up @@ -6400,19 +6400,19 @@ declare namespace LocalJSX {
*/
"color"?: Color;
/**
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Only applies to the `ionic` theme.
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset.
*/
"hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
"mode"?: "ios" | "md";
/**
* Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
* Set to `"crisp"` for a badge with even slightly rounded corners, `"soft"` for a badge with slightly rounded corners, `"round"` for a badge with fully rounded corners, or `"rectangular"` for a badge without rounded corners. Defaults to `"soft"` if both the shape property and theme config are unset.
*/
"shape"?: 'soft' | 'round | rectangular';
"shape"?: 'crisp' | 'soft' | 'round' | 'rectangular';
/**
* Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon). Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
* Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a larger size. Defaults to `"small"` if both the size property and theme config are unset.
*/
"size"?: 'small' | 'medium' | 'large';
/**
Expand Down Expand Up @@ -6864,7 +6864,7 @@ declare namespace LocalJSX {
*/
"shape"?: IonChipShape;
/**
* Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset.
* Set to `"small"` for a chip with less height and padding, or `"large"` for a chip with more height and padding. Defaults to `"large"` if both the size property and theme config are unset.
*/
"size"?: IonChipSize;
}
Expand Down
303 changes: 300 additions & 3 deletions core/src/components/avatar/avatar.common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../../themes/mixins.scss";
@use "../../themes/mixins" as mixins;

// Avatar
// --------------------------------------------------
Expand All @@ -7,7 +7,7 @@
/**
* @prop --border-radius: Border radius of the avatar and inner image
*/
@include border-radius(var(--border-radius));
@include mixins.border-radius(var(--border-radius));

display: block;

Expand All @@ -16,7 +16,7 @@

::slotted(ion-img),
::slotted(img) {
@include border-radius(var(--border-radius));
@include mixins.border-radius(var(--border-radius));

width: 100%;
height: 100%;
Expand All @@ -25,3 +25,300 @@

overflow: hidden;
}

// Avatar Slotted Elements
// ---------------------------------------------

// Badge Indicator inside Avatar xxsmall
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xxsmall-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-xxsmall-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xxsmall-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-xxsmall-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-position-top),
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-position-end),
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-xxsmall-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-xxsmall-badge-indicator-default-bottom-translate-y)
)
);
}

// Badge Indicator inside Avatar xsmall
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xsmall-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-xsmall-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xsmall-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-xsmall-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xsmall-badge-indicator-default-top-position-top),
var(--ion-avatar-size-xsmall-badge-indicator-default-top-position-end),
var(--ion-avatar-size-xsmall-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-xsmall-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xsmall-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-xsmall-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-xsmall-badge-indicator-default-bottom-translate-y)
)
);
}

// Badge Indicator inside Avatar small
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-small-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-small-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-small-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-small-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-small-badge-indicator-default-top-position-top),
var(--ion-avatar-size-small-badge-indicator-default-top-position-end),
var(--ion-avatar-size-small-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-small-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-small-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-small-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-small-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-small-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-small-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-small-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-small-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-small-badge-indicator-default-bottom-translate-y)
)
);
}

// Badge Indicator inside Avatar medium
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-medium-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-medium-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-medium-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-medium-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-medium-badge-indicator-default-top-position-top),
var(--ion-avatar-size-medium-badge-indicator-default-top-position-end),
var(--ion-avatar-size-medium-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-medium-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-medium-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-medium-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-medium-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-medium-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-medium-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-medium-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-medium-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-medium-badge-indicator-default-bottom-translate-y)
)
);
}

// Badge Indicator inside Avatar large
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-large-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-large-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-large-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-large-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-large-badge-indicator-default-top-position-top),
var(--ion-avatar-size-large-badge-indicator-default-top-position-end),
var(--ion-avatar-size-large-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-large-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-large-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-large-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-large-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-large-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-large-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-large-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-large-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-large-badge-indicator-default-bottom-translate-y)
)
);
}

// Badge Indicator inside Avatar xlarge
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xlarge-badge-indicator-empty-top-translate-x),
var(--ion-avatar-size-xlarge-badge-indicator-empty-top-translate-y)
)
);
}

:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include mixins.transform(
translate(
var(--ion-avatar-size-xlarge-badge-indicator-empty-bottom-translate-x),
var(--ion-avatar-size-xlarge-badge-indicator-empty-bottom-translate-y)
)
);
}

:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xlarge-badge-indicator-default-top-position-top),
var(--ion-avatar-size-xlarge-badge-indicator-default-top-position-end),
var(--ion-avatar-size-xlarge-badge-indicator-default-top-position-bottom),
var(--ion-avatar-size-xlarge-badge-indicator-default-top-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xlarge-badge-indicator-default-top-translate-x),
var(--ion-avatar-size-xlarge-badge-indicator-default-top-translate-y)
)
);
}

:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@include mixins.position(
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-position-top),
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-position-end),
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-position-bottom),
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-position-start)
);
@include mixins.transform(
translate(
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-translate-x),
var(--ion-avatar-size-xlarge-badge-indicator-default-bottom-translate-y)
)
);
}
Loading
Loading