docs menudefault contacts your own list
ContactLinks
A row of 44 px icon links to reach the author.
import { ContactLinks } from "@meowerse/ui"; · source packages/ui/src/components/ContactLinks.tsx
variants and states
props
| prop | type | default | required |
|---|---|---|---|
contacts | Contact[] the links to show; defaults to the author's own contacts. | DEFAULT_CONTACTS | no |
className | string extra class names to append. | — | no |
css custom properties
| variable | dark | light |
|---|---|---|
--c-fg | #ededeb | #1a1a1c |
--c-fg-muted | #b3b3af | #46464a |
--c-line | #232326 | #cfcec8 |
--c-surface | #151517 | #dfded9 |
--r-m | 4px | same |
--sp-3 | 12px | same |
Classes: .mw-contacts. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
default contacts
import { ContactLinks } from "@meowerse/ui";
<ContactLinks /><nav class="mw-contacts" aria-label="contact"><a href="mailto:aleksandrnyrko@gmail.com" class="mw-contacts__link"><svg class="mw-icon" data-icon="mail" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path><path d="M3 7l9 6l9 -6"></path></svg><span class="sr-only">email</span></a><a href="https://t.me/ALXNK0" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-telegram" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path></svg><span class="sr-only">telegram (opens in a new tab)</span></a><a href="https://instagram.com/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-instagram" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4l0 -8"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M16.5 7.5v.01"></path></svg><span class="sr-only">instagram (opens in a new tab)</span></a><a href="https://github.com/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-github" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg><span class="sr-only">github (opens in a new tab)</span></a><a href="https://linkedin.com/in/alxnko" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-linkedin" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 11v5"></path><path d="M8 8v.01"></path><path d="M12 16v-5"></path><path d="M16 16v-3a2 2 0 1 0 -4 0"></path><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10"></path></svg><span class="sr-only">linkedin (opens in a new tab)</span></a></nav>your own list
import { ContactLinks } from "@meowerse/ui";
<ContactLinks contacts={[{"label":"github","href":"https://github.com/meowerse","icon":"brand-github"}]} /><nav class="mw-contacts" aria-label="contact"><a href="https://github.com/meowerse" class="mw-contacts__link" target="_blank" rel="noreferrer noopener"><svg class="mw-icon" data-icon="brand-github" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg><span class="sr-only">github (opens in a new tab)</span></a></nav>accessibility
- Each icon link is named by its label.
- Web links open in a new tab with rel="noreferrer noopener"; mailto opens the mail app in place.
do and don't
do
- Keep the list short and familiar.
don't
- Don't use unlabelled icons.