The foundational building blocks of the Eddie Design System.

Atoms are the smallest, most basic components. They can't be broken down further without losing their meaning.

Forms

Component Tag Description
Field Note <ed-field-note>
Tag <ed-tag> Dismissible tag component for displaying labels, categories, or filters. Renders as a list item...

Icons

Component Tag Description
Icon <ed-icon> Scalable inline SVG icon component from the Eddie icon library. Icons can be rendered in two modes:...
Loading Indicator <ed-loading-indicator> A loading/spinner indicator component for displaying asynchronous operation progress. Shows a...

Text

Component Tag Description
Heading <ed-heading> Semantic heading component that renders the appropriate HTML heading tag (`h1`–`h6`) with flexible...
Hr <ed-hr> Horizontal rule component for visual separation of content sections. Renders a semantic `<hr>`...
Text Link <ed-text-link> Semantic link component with flexible typography and styling variants. Renders a styled anchor...

Browse Atoms in Storybook →