MadeWith
A "Made with ♥ at …" attribution line, styled once.
import { MadeWith, type MadeWithProps } from "@kanzo-tech/ui";<MadeWith href="https://kanzo.tech">Kanzo</MadeWith>The heart carries role="img" and an accessible name, so the line reads as "Made with love at
Kanzo" rather than dropping the word a sighted reader gets from the glyph.
Why it is a component
The library's first admission rule is domain-freedom, and a line that hard-codes English words and a
brand name breaks it. So the brand is children and has no default: the library names nobody,
and markup is not a prop. The English words are entries of translations — prefix, infix and
the heart's name, loveLabel — with English defaults: a convenience a caller replaces to translate,
not a domain the component carries. There
is no linkComponent: a caller with a routed anchor composes the line itself.
It earns a name because every product this library is built for ships this line, and writing four elements per product is the duplication a design system exists to end.
What would reverse it: a second product finding the sentence shape wrong — a different word order, a brand that is not last, a line needing two links. At that point this is one arrangement pretending to be a component, and four elements are cheap.
Translating
<MadeWith href="https://kanzo.tech" translations={{ prefix: "Hecho con", infix: "en", loveLabel: "amor" }}>
Kanzo
</MadeWith>API Reference
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — (required; the brand) |
href | string | — |
translations | Partial<MadeWithTranslations> | English, below |
className | string | — |
MadeWithTranslations:
| Key | Default |
|---|---|
prefix | "Made with" — before the heart |
infix | "at" — between the heart and the brand |
loveLabel | "love" — the heart's accessible name |