-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed before the chip 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_".
+ string
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed after the chip 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_".
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
- false
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed before the chip 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_".
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed after the chip 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_".
-
@@ -143,7 +143,7 @@ const ChipCodePage = () => {
return (
-
+
diff --git a/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
new file mode 100644
index 0000000000..9d198e64b0
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
@@ -0,0 +1,214 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import anatomy from "./images/chip-anatomy.png";
+import Example from "@/common/example/Example";
+import categorization from "./examples/categorization";
+import filter from "./examples/filter";
+import spacing from "./images/chip-spacing.png";
+import Image from "@/common/Image";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Chips are versatile components that allow users to display and manage information in a compact format. They are
+ commonly used to represent selected options, tags, filters, or interactive elements within an interface. Their
+ lightweight and flexible design makes them ideal for enhancing user experience by enabling quick and organized
+ interactions.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Prefix(Optional): the prefix can be an icon or an action icon that provides
+ additional context or functionality.
+
+
+ Label: the primary text that conveys the chip's meaning, such as a tag name or a selected
+ option. It should be concise, clear, and relevant to the chip's function.
+
+
+ Suffix(Optional): the suffix can be an icon or an action icon that enhances
+ interactivity.
+
+
+
+ ),
+ },
+ {
+ title: "Using chips",
+ subSections: [
+ {
+ title: "Categorization",
+ content: (
+ <>
+
+ Chips are commonly used to organize content by grouping related topics, products, or subjects. They often
+ serve as a summary of the page's content. When using chips for categorization, ensure that they are
+ relevant to the displayed information to maintain clarity and usability.
+
+
+
+ ),
+ },
+ {
+ title: "Faceted search filters",
+ content: (
+ <>
+
+ When used alongside the select component, chips serve as effective filter facets, allowing users to refine
+ search results by choosing and removing specific attributes. This combination enables users to include or
+ exclude preferences directly from their queries. For faceted filtering, chips should be dismissible,
+ ensuring effortless adjustments and a more intuitive selection experience.
+
+
+
+ ),
+ },
+ {
+ title: "Chips vs. Badges",
+ content: (
+ <>
+
+ While{" "}
+
+ badges
+ {" "}
+ and chips share a similar visual style, they serve different purposes in a user interface:{" "}
+ chips are interactive, while badges are static indicators.
+
+
+
+
+
Component
+
Use case
+
+
+
+
+
+ Chip
+
+
+ Chips help users categorize, filter, or organize information. They often include keywords or
+ metadata, providing quick access to related content and aiding navigation.
+
+
+
+
+ Badge
+
+
+ Badges function as visual indicators, displaying status or contextual information. They are
+ non-interactive and rely on color and text to communicate meaning.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "Keep labels concise and meaningful",
+ content: (
+
+
+ Labels should be short and clear, ideally one or two words.
+
+
+ Avoid long text that may cause truncation or wrapping issues.
+
+
+ Use sentence case for readability (e.g., "New York" instead of "NEW YORK").
+
+
+ ),
+ },
+ {
+ title: "Avoid overloading the UI with too many chips",
+ content: (
+ <>
+
+
+ Use chips only when necessary to avoid clutter.
+
+
+ Group related chips logically and consider collapsible chip groups if the list becomes
+ too long.
+
+
+
+
+ ),
+ },
+ {
+ title: "Ensure icons are contextually relevant and avoid redundancy",
+ content: (
+ <>
+
+ While the component configuration is flexible enough to allow multiple icons or action icons, it is{" "}
+ not recommended to use two icons or two action icons within the same chip. Instead, a{" "}
+ balanced approach should be followed: pairing one icon (to provide
+ context) with one action icon (to enable an interaction).
+
+
+
+ Icons should add value to the chip, not just be decorative.
+
+
+ Ensure that icons are easy to recognize and understand within the chip's context. The
+ selected icon should accurately represent the chip's purpose, while the action icon should clearly
+ indicate the interaction it triggers.
+
+
+ Icons should not compete for attention or convey conflicting messages. Instead, they
+ should complement each other to enhance usability.
+
+
+ Follow the guideline: one informational icon + one action icon (if needed)—avoid using
+ two icons of the same type.
+
+
+
+ ),
+ },
+ {
+ title: "Manage chip overflow gracefully",
+ content: (
+
+
+ If there are too many chips in a row, consider horizontal scrolling or wrapping.
+
+
+ For dynamic content, provide a "Show more" option to avoid overwhelming the user.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const ChipOverviewPage = () => (
+
+
+
+
+
+
+);
+export default ChipOverviewPage;
diff --git a/apps/website/screens/components/chip/overview/examples/categorization.ts b/apps/website/screens/components/chip/overview/examples/categorization.ts
new file mode 100644
index 0000000000..d2dd832054
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/examples/categorization.ts
@@ -0,0 +1,21 @@
+import { DxcChip, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ {}} />
+ {}} />
+ {}} />
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/examples/filter.ts b/apps/website/screens/components/chip/overview/examples/filter.ts
new file mode 100644
index 0000000000..39fd2e7951
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/examples/filter.ts
@@ -0,0 +1,54 @@
+import { DxcChip, DxcInset, DxcFlex, DxcSelect, DxcHeading } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+const roles = ["Admin", "Security Analyst", "Auditor", "Read-Only User"];
+ const [selectedRoles, setSelectedRoles] = useState([roles[0]]);
+
+ const handleSelectChange = ({value}) => {
+ setSelectedRoles(value);
+ };
+ const handleRemoveRole = (roleToRemove) => {
+ setSelectedRoles(selectedRoles.filter((role) => role !== roleToRemove));
+ };
+
+ return (
+
+
+ ({ label: role, value: role }))}
+ onChange={handleSelectChange}
+ value={selectedRoles}
+ multiple
+ />
+
+
+
+ {selectedRoles.map((role) => (
+ handleRemoveRole(role)}
+ />
+ ))}
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcFlex,
+ DxcHeading,
+ DxcInset,
+ DxcSelect,
+ useState
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/images/chip-anatomy.png b/apps/website/screens/components/chip/overview/images/chip-anatomy.png
new file mode 100644
index 0000000000..ef136349cb
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/chip-anatomy.png differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-spacing.png b/apps/website/screens/components/chip/overview/images/chip-spacing.png
new file mode 100644
index 0000000000..960982e926
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/chip-spacing.png differ
diff --git a/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx b/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx
deleted file mode 100644
index c82afaf2b0..0000000000
--- a/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import specsImage from "./images/chip_specs.png";
-import statesImage from "./images/chip_states_container.png";
-import prefixSuffixStatesImage from "./images/chip_states_action.png";
-import anatomyImage from "./images/chip_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The chip component container states are enabled and disabled:
-
-
-
-
-
- The chip action item has the following states: enabled, hover,{" "}
- focus, active and disabled:
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
-
- Prefix (Optional)
-
- Label
-
- Suffix (Optional)
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-