+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
+ name with "filled_".
+
+
-
+
label
@@ -51,51 +76,26 @@ const sections = [
-
title
-
- string
-
-
- Text representing advisory information related to the badge. Under the hood, this prop also serves as an
- accessible label for the component.
-
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
- replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
- name with "filled_".
+ Text representing advisory information related to the badge. Under the hood, this prop also serves as an
+ accessible label for the component.
-
-
-
size
-
- 'small' | 'medium' | 'large'
-
-
Size of the component.
-
- 'medium'
-
-
),
},
@@ -106,19 +106,19 @@ const sections = [
title: "Contextual",
content: ,
},
- {
- title: "Notification",
- content: ,
- },
{
title: "Icons",
content: ,
},
+ {
+ title: "Notification",
+ content: ,
+ },
],
},
];
-const BadgeTableCodePage = () => {
+const BadgeCodePage = () => {
return (
@@ -129,4 +129,4 @@ const BadgeTableCodePage = () => {
);
};
-export default BadgeTableCodePage;
+export default BadgeCodePage;
diff --git a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
new file mode 100644
index 0000000000..3e08f39142
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
@@ -0,0 +1,174 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import notification from "./examples/notification";
+import contextual from "./examples/contextual";
+import anatomy from "./images/badge_anatomy.png";
+import Example from "@/common/example/Example";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Being a non-clickable UI element, the badge serves the purpose of highlighting status, categories or key
+ information within an interface. Designed for clarity and flexibility, the badge seamlessly integrates with
+ different layouts while maintaining consistency. It supports various styles to adapt to diverse use cases
+ without overwhelming the interface and it can be found in combination with other components, such as navtabs.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: it's the area that holds the badge's content, defining its shape, size and
+ background while ensuring proper visibility within the interface.
+
+
+ Semantic categorization: a visual element that complements the label, providing additional
+ meaning or enhancing recognition.
+
+
+ Label: displays the textual content of the badge, conveying status, category or key
+ information.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+
+ The Badge component has two distinct variants, each serving specific purposes within our interface.
+
+ ),
+ subSections: [
+ {
+ title: "Notification badge",
+ content: (
+ <>
+
+ The notification badge is a non-interactive component that serves as an informative indicator, typically
+ used to display counts or alerts, such as the number of unread messages or missed notifications.
+
+
+
+ This notification badge allows label, though it is not not mandatory to use it. You may want to use the
+ label to display the number of notifications missed, or just the empty badge to show that some changes
+ have been made to a certain section of the interface.
+
+
+ Only one color is allowed for this badge, which is red, and cannot be changed by any means.
+
+
+ ),
+ },
+ {
+ title: "Contextual badge",
+ content: (
+ <>
+
+ Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main
+ advantage lies in its ability to categorize content and represent specific information. It is
+ intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed
+ information.
+
+
+
+ The contextual badge is available in 8 different colors from the Halstack palette. This flexibility allows
+ the user to adapt the tag smoothly to diverse contexts:
+
+
+
+ Non-semantic categorization: used in instances where the badge does not carry semantic
+ meaning, it can be employed in any color from the available palette.
+
+
+ Semantic categorization: when the badge conveys semantic information, specific semantic
+ colors are available:
+
+
+ Green: positive actions, such as approved, completed, success…
+
+ Blue: informative actions, such as published, in use...
+
+ Red: negative actions, such as error, rejection, incomplete...
+
+
+ Orange: alert actions, such as pending or paused actions...
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use badges to convey key information: Notification badges are ideal for displaying counts,
+ such as unread messages or missed notifications, while contextual badges help indicate task statuses or
+ progress.
+
+
+ Leverage color for clarity: Contextual badge colors can improve recognition and enhance the
+ user experience, especially in data-heavy interfaces with high cognitive load.
+
+
+ Keep labels short and meaningful: Badge labels should be concise, ideally no more than
+ three words, to ensure quick comprehension.
+
+
+ Use badges to categorize content: Contextual badges can help group-related elements, such
+ as team names, repositories, or file types, providing additional context.
+
+
+ Ensure consistent placement: Establish clear guidelines for where badges appear in the
+ interface to maintain visual coherence and usability.
+
+
+ Avoid overuse: Excessive badges can clutter the interface and reduce their effectiveness in
+ communicating key information.
+
+
+ Ensure clarity in data visualization: Avoid mixing semantic and non-semantic contextual
+ badges within the same format to prevent confusion.
+
+
+ Avoid obstructing key content: Badges should be placed thoughtfully to ensure they do not
+ interfere with essential information or interactions.
+
+
+ Use positive or neutral indicators: Notification badges should typically display counts or
+ statuses without negative symbols to ensure clarity.
+
+
+
+ ),
+ },
+];
+
+const BadgeOverviewPage = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default BadgeOverviewPage;
diff --git a/apps/website/screens/components/badge/overview/examples/contextual.ts b/apps/website/screens/components/badge/overview/examples/contextual.ts
new file mode 100644
index 0000000000..089399ece7
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/examples/contextual.ts
@@ -0,0 +1,38 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/overview/examples/notification.ts b/apps/website/screens/components/badge/overview/examples/notification.ts
new file mode 100644
index 0000000000..3eaa689708
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/examples/notification.ts
@@ -0,0 +1,22 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/overview/images/badge_anatomy.png b/apps/website/screens/components/badge/overview/images/badge_anatomy.png
new file mode 100644
index 0000000000..a39764522d
Binary files /dev/null and b/apps/website/screens/components/badge/overview/images/badge_anatomy.png differ
diff --git a/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx b/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx
deleted file mode 100644
index d868a752df..0000000000
--- a/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import specsImage from "./images/badge_specs.jpg";
-import anatomyImage from "./images/badge_anatomy.jpg";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Icon
- Label
-
-
- ),
- },
- {
- title: "Design tokens",
- content: This component currently has no design tokens.,
- },
-];
-
-const BadgeSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BadgeSpecsPage;
diff --git a/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg b/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg
deleted file mode 100644
index 689a0277d5..0000000000
Binary files a/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/specs/images/badge_specs.jpg b/apps/website/screens/components/badge/specs/images/badge_specs.jpg
deleted file mode 100644
index 42c390f0d2..0000000000
Binary files a/apps/website/screens/components/badge/specs/images/badge_specs.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx b/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx
deleted file mode 100644
index e1a58f3d29..0000000000
--- a/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import notificationVariants from "./images/badge_notification_variants.jpg";
-import contextualVariants from "./images/badge_contextual_variants.jpg";
-
-const sections = [
- {
- title: "Usage",
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use a notification badge to display counts, such as the number of unread messages or missed notifications.
-
-
- Showcase the completion or status of tasks by using the contextual badge. Its different colors can help
- the user to identify quickly the status of a task and can improve significantly the overall user
- experience in data visualization screens with high cognitive load.
-
-
- Categorize pieces of information using the contextual label and its colors. It can provide additional
- context or information. For example, a badge can indicate the type or category of content (e.g., names of
- the teams involved in the task, repositories, folders…).
-
-
- Keep it concise. Comprehensively use badges, only displaying essential information that adds value to the
- user experience.
-
-
- The label of the badge component should never contain more than three words. Keeping it simple is the key
- to ensuring users understand the categorization quickly.
-
-
- Establish clear design guidelines within the interface for badges, specially when deciding its placement.
- Consistent use of badges enhances visual coherence and aids user comprehension.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Use both semantic and non-semantic contextual badges in the same data visualization format.
-
-
- Overuse badges, as an excessive use can saturate the interface and fail to communicate important
- information.
-
-
- Place badges in locations that may obstruct essential content or user interactions.
-
-
- Use excessively long sentences in labels. Remember to keep it simple, with a maximum of 3 words.
-
-
- Place the negative symbol (-) in badges, whether they are notification or contextual. Notification badges
- should typically indicate counts or statuses that are positive or neutral to insure clarity and
- comprehension.
-
-
- ),
- },
- ],
- },
- {
- title: "Variants",
- content: (
-
- The Badge component has two distinct variants, each serving specific purposes within our interface.
-
- ),
- subSections: [
- {
- title: "Notification badge",
- content: (
- <>
-
- The notification badge is a non-interactive component that serves as an informative indicator, typically
- used to display counts or alerts, such as the number of unread messages or missed notifications.
-
-
-
-
-
- This notification badge allows label, though it is not not mandatory to use it. You may want to use the
- label to display the number of notifications missed, or just the empty badge to show that some changes
- have been made to a certain section of the interface.
-
-
- Only one color is allowed for this badge, which is red, and cannot be changed by all means.
-
-
- ),
- },
- {
- title: "Contextual badge",
- content: (
- <>
-
- Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main
- advantage lies in its ability to categorize content and represent specific information. It is
- intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed
- information.
-
-
-
-
-
- The contextual badge is available in 8 different colors from the Halstack palette. This flexibility allows
- the user to adapt the tag smoothly to diverse contexts:
-
-
-
- Non-semantic categorization: used in instances where the badge does not carry semantic
- meaning, it can be employed in any color from the available palette.
-
-
- Semantic categorization: when the badge conveys semantic information, specific semantic
- colors are available:
-
-
- Green: positive actions, such as approved, completed, success…
-
- Blue: informative actions, such as published, in use...
-
- Red: negative actions, such as error, rejection, incomplete...
-
-
- Orange: alert actions, such as pending or paused actions...
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const BadgeUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BadgeUsagePage;
diff --git a/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg b/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg
deleted file mode 100644
index d6b1474f8e..0000000000
Binary files a/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg b/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg
deleted file mode 100644
index 89875ddcaa..0000000000
Binary files a/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg and /dev/null differ
diff --git a/packages/lib/src/badge/Badge.tsx b/packages/lib/src/badge/Badge.tsx
index 54369e04ca..98649c2bd4 100644
--- a/packages/lib/src/badge/Badge.tsx
+++ b/packages/lib/src/badge/Badge.tsx
@@ -1,116 +1,96 @@
import styled from "styled-components";
import BadgePropsType from "./types";
-import CoreTokens from "../common/coreTokens";
import DxcIcon from "../icon/Icon";
import { Tooltip } from "../tooltip/Tooltip";
const contextualColorMap = {
grey: {
- background: CoreTokens.color_grey_200,
- text: CoreTokens.color_grey_900,
+ background: "var(--color-bg-neutral-light)",
+ text: "var(--color-fg-neutral-strongest)",
},
blue: {
- background: CoreTokens.color_blue_200,
- text: CoreTokens.color_blue_900,
+ background: "var(--color-bg-secondary-lighter)",
+ text: "var(--color-fg-secondary-stronger)",
},
green: {
- background: CoreTokens.color_green_200,
- text: CoreTokens.color_green_900,
+ background: "var(--color-bg-success-lighter)",
+ text: "var(--color-fg-success-stronger)",
},
orange: {
- background: CoreTokens.color_orange_200,
- text: CoreTokens.color_orange_900,
+ background: "var(--color-bg-warning-lighter)",
+ text: "var(--color-fg-warning-stronger)",
},
red: {
- background: CoreTokens.color_red_200,
- text: CoreTokens.color_red_900,
+ background: "var(--color-bg-error-lighter)",
+ text: "var(--color-fg-error-stronger)",
},
yellow: {
- background: CoreTokens.color_yellow_200,
- text: CoreTokens.color_yellow_900,
+ background: "var(--color-bg-yellow-light)",
+ text: "var(--color-fg-neutral-yellow-dark)",
},
purple: {
- background: CoreTokens.color_purple_200,
- text: CoreTokens.color_purple_900,
+ background: "var(--color-bg-primary-lighter)",
+ text: "var(--color-fg-primary-stronger)",
},
};
+const notificationColor = {
+ background: "var(--color-bg-error-strong)",
+ text: "var(--color-fg-neutral-bright)",
+};
+
const sizeMap = {
small: {
- height: "20px",
- width: "20px",
+ height: "var(--height-xs)",
minWidth: "20px",
- fontSize: CoreTokens.type_scale_01,
- borderRadius: CoreTokens.spacing_12,
- iconSize: "14px",
+ fontSize: "var(--typography-label-s)",
+ borderRadius: "var(--border-radius-l)",
+ iconSize: "var(--height-xxxs)",
padding: {
- contextual: `${CoreTokens.spacing_4}`,
- notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_4}`,
+ contextual: "var(--spacing-padding-xxs)",
+ notification: "var(--spacing-padding-none)",
+ notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-xxs)",
},
},
medium: {
- height: "24px",
- width: "24px",
+ height: "var(--height-s)",
minWidth: "24px",
- fontSize: CoreTokens.type_scale_02,
- borderRadius: CoreTokens.spacing_12,
- iconSize: "16px",
+ fontSize: "var(--typography-label-m)",
+ borderRadius: "var(--border-radius-l)",
+ iconSize: "var(--height-xxs)",
padding: {
- contextual: `${CoreTokens.spacing_4} ${CoreTokens.spacing_8}`,
- notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_4}`,
+ contextual: "var(--spacing-padding-xxs) var(--spacing-padding-xs)",
+ notification: "var(--spacing-padding-none)",
+ notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-xxs)",
},
},
large: {
- height: "32px",
- width: "32px",
+ height: "var(--height-m)",
minWidth: "32px",
- fontSize: CoreTokens.type_scale_04,
- borderRadius: CoreTokens.spacing_24,
- iconSize: "24px",
+ fontSize: "var(--typography-label-xl)",
+ borderRadius: "var(--border-radius-xl)",
+ iconSize: "var(--height-s)",
padding: {
- contextual: `${CoreTokens.spacing_4} ${CoreTokens.spacing_8}`,
- notification: `${CoreTokens.spacing_0} ${CoreTokens.spacing_8}`,
+ contextual: "var(--spacing-padding-xxs) var(--spacing-padding-xs)",
+ notification: "var(--spacing-padding-none)",
+ notificationLabelled: "var(--spacing-padding-none) var(--spacing-padding-xs)",
},
},
};
-const DxcBadge = ({
- label,
- title,
- mode = "contextual",
- color = "grey",
- icon,
- notificationLimit = 99,
- size = "medium",
-}: BadgePropsType): JSX.Element => (
-
-
- {mode === "contextual" && icon && (
- {typeof icon === "string" ? : icon}
- )}
- {label && (
-
- )}
-
-
-);
-
const getColor = (mode: BadgePropsType["mode"], color: BadgePropsType["color"]) =>
- mode === "contextual" && color ? contextualColorMap[color].text : CoreTokens.color_white;
+ mode === "contextual" && color ? contextualColorMap[color].text : notificationColor.text;
const getBackgroundColor = (mode: BadgePropsType["mode"], color: BadgePropsType["color"]) =>
- mode === "contextual" && color ? contextualColorMap[color].background : CoreTokens.color_red_700;
+ mode === "contextual" && color ? contextualColorMap[color].background : notificationColor.background;
-const getPadding = (mode: BadgePropsType["mode"], size: BadgePropsType["size"]) =>
- size && (mode === "contextual" ? sizeMap[size].padding.contextual : sizeMap[size].padding.notification);
+const getPadding = (mode: BadgePropsType["mode"], size: BadgePropsType["size"], label: BadgePropsType["label"]) =>
+ size &&
+ (mode === "contextual"
+ ? sizeMap[size].padding.contextual
+ : label
+ ? sizeMap[size].padding.notificationLabelled
+ : sizeMap[size].padding.notification);
const BadgeContainer = styled.div<{
label: BadgePropsType["label"];
@@ -120,14 +100,14 @@ const BadgeContainer = styled.div<{
}>`
box-sizing: border-box;
border-radius: ${(props) => props.size && sizeMap[props.size].borderRadius};
- padding: ${(props) => (props.label ? getPadding(props.mode, props.size) : "")};
+ padding: ${(props) => (props.label ? getPadding(props.mode, props.size, props.label) : "")};
width: ${(props) =>
- !props.label && props.mode === "notification" ? props.size && sizeMap[props.size].width : "fit-content"};
+ !props.label && props.mode === "notification" ? props.size && sizeMap[props.size].minWidth : "fit-content"};
min-width: ${(props) => props.mode === "notification" && props.size && sizeMap[props.size].minWidth};
height: ${(props) => props.size && sizeMap[props.size].height};
display: flex;
align-items: center;
- gap: ${CoreTokens.spacing_2};
+ ${(props) => props.mode === "contextual" && "gap: var(--spacing-gap-xxs)"};
justify-content: center;
background-color: ${(props) => getBackgroundColor(props.mode, props.color)};
color: ${(props) => getColor(props.mode, props.color)};
@@ -144,10 +124,41 @@ const IconContainer = styled.div<{ size: BadgePropsType["size"] }>`
`;
const Label = styled.span<{ size: BadgePropsType["size"] }>`
- font-family: ${CoreTokens.type_sans};
+ font-family: var(--typography-font-family);
font-size: ${(props) => props.size && sizeMap[props.size].fontSize};
- font-weight: ${CoreTokens.type_semibold};
+ font-style: normal;
+ font-weight: var(--typography-label-semibold);
white-space: nowrap;
+ line-height: normal;
`;
+const DxcBadge = ({
+ label,
+ title,
+ mode = "contextual",
+ color = "grey",
+ icon,
+ notificationLimit = 99,
+ size = "medium",
+}: BadgePropsType): JSX.Element => (
+
+
+ {mode === "contextual" && icon && (
+ {typeof icon === "string" ? : icon}
+ )}
+ {label && (
+
+ )}
+
+
+);
+
export default DxcBadge;