Atomic Components
Atomic Components (ACs) are reusable web components used across HCL Digital Experience (DX) products to provide a consistent user experience and design language.
Search V2 consumes these components, and this page serves as an entry point to the latest documentation and a list of components used within Search v2.
The AC library is maintained in the enchanted-web-components public repository.
Components used in Search v2
The following ACs are used within Search v2. For detailed component APIs, properties, usage examples, component states, accessibility guidance, and interactive playgrounds, refer to the Enchanted Web Components storybook.
| Component | Description | Available CSS Parts |
|---|---|---|
enchanted-button |
Clickable button for actions | ::part(button) |
enchanted-textfield |
Text input field for user queries | ::part(textfield) |
enchanted-select |
Dropdown selection component | ::part(select) |
enchanted-link |
Hyperlink component | No part attributes |
enchanted-list |
List container component | ::part(list) |
enchanted-list-item |
Individual list item used within enchanted-list |
::part(list-item) |
enchanted-svg-icon |
SVG icon display component | ::part(svg-icon) |
enchanted-circular-progress |
Circular loading indicator | ::part(circular-progress) |
enchanted-chip |
Tag or filter element | ::part(chip) |
enchanted-toggle-button |
Two-state toggle button | ::part(toggle-button) |
enchanted-table-pagination |
Pagination control for tabular data | ::part(table-pagination) |
enchanted-header-layout |
Header section layout container | ::part(header-layout) |
enchanted-ac-base-element |
Base class for AC | No part attributes |