Person
A person or service account shown the same way everywhere, with an avatar, a name and an optional second line.
Nimali Pereranimali@example.lkKasun Silvasvc-payroll-syncService account
Dilani FernandoRuwan Bandara
Usage
import { Person } from "@zynactra/ui/person"<Person name="Nimali Perera" id="u_nimali" description="nimali@example.lk" />Without a name, the id shows in mono, so an unknown user is still visible rather than blank. When both name and id are set (or details is), a Hover Card shows the ID and details on hover and focus. avatarOnly keeps the name for screen readers and the hover card.
Guidelines
- Use it wherever a user appears: table cells, activity logs, pickers' selected values.
- Resolve names in your app (from your directory) and pass them in; Person doesn't fetch.
size="sm"in tables and logs; the default in headers and detail panels.