Naming conventions and patterns for component properties.

Eddie follows strict naming conventions for component APIs. These conventions are defined in the Code Guidelines and enforced across all components.

Property Naming Conventions

Convention Usage Example
variant Primary stylistic variations "primary", "danger"
size T-shirt sizes "xs", "sm", "md", "lg", "xl"
text General string content text="Button label"
title Heading text title="Card Title"
label Form field labels label="Email"
iconName / iconPosition Icon integration iconName="arrow-right"
imgSrc / imgAlt Image source and alt imgSrc="hero.jpg"
tagName Rendered HTML element tagName="h2"
behavior Functional variations behavior="toggle"
is[Behavior] Boolean behavioral toggles isActive
inverted Dark-background inversions inverted
href Navigation URL href="/page"

These are conventions, not an exhaustive API reference. Each component's actual properties, accepted values, and defaults are documented in its Storybook Autodocs — generated directly from the source TypeScript.

Slots

Components use named slots for content projection:

<ed-card> <img slot="header" src="..." alt="..." /> Default slot content (body) <ed-button slot="footer" text="Action"></ed-button> </ed-card>

Slot names are documented per-component in Storybook.

Casing

All multi-word property names use camelCase:

<ed-hero imgSrc="..." imgAlt="..." tagName="section"></ed-hero> <ed-button iconName="arrow" iconPosition="after" text="Next"></ed-button>

Compound Components

Some components split into parent + children. Child components have no .scss or .stories.ts of their own — styles and stories live with the parent.

Full API Reference

For the complete, authoritative API of each component — including all properties, slots, events, and accepted values — see the Storybook Autodocs:

Browse Component APIs in Storybook →